css3网页制作实例:仿Apple.com的导航栏

2012-12-18 00:00:00
分享到:
分类:HTML教程
摘要 : 破洛洛文章简介:css3网页制作实例:仿Apple.com的导航栏 apple的官网有个相当不错的头部导航,今天我们运用css3的

破洛洛文章简介:css3网页制作实例:仿Apple.com的导航栏

apple的官网有个相当不错的头部导航,今天我们运用css3的知识,不借助一张图片,来实现类似的效果。

下载源文件:http://www.pouoluo.com/files/soft/1_121211104404.zip

1.会用到的css3知识 text-shadow :文字阴影 border-radius:圆角 box-shadow:容器阴影 box-shadow: inset :当增加inset后,表示使用内阴影 gradient :渐变,渐变的代码还是很多的,幸运的是网上有自动生成渐变的工具,请看CSS3 Gradient Generator keyframes:这个属性就比较有意思,估计用的人很少,用于配合css3动画,理解为动画模块或一组css3动画设置。只有 WebKit 内核的浏览器支持这一特性,经过明河验证firefox4也不支持。 2.上一坨代码… 2.1导航容器样式
    /* 导航 */ #appleNav { margin: 40px 0; list-style: none; /* Apple使用Lucida字体 */ font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing: -0.5px; font-size: 13px; /* 文字阴影 */ text-shadow: 0 -1px 3px #202020; width: 873px; height: 34px; /*圆角*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /*阴影*/ -moz-box-shadow: 0 3px 3px #cecece; -webkit-box-shadow: 0 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; }
2.2导航子元素样式
    #appleNav li { display: block; float: left; border-right: 1px solid #5d5d5d; border-left: 1px solid #929292; width: 105px; height: 34px; border-bottom: 1px solid #575757; border-top: 1px solid #797979; /*渐变背景,关于css3渐变效果制作请看http://gradients.glrzad.com/ */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color: #5f5f5f; } /*鼠标滑过菜单元素后*/ #appleNav li:hover { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100%); background-color: #383838; /*增加内阴影效果 */ -moz-box-shadow: inset 0 0 5px 5px #535353; -webkit-box-shadow: inset 0 0 5px 5px #535353; box-shadow: inset 0 0 5px 5px #535353; } /*鼠标按下菜单元素后*/ #appleNav li:active { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100%); background-color: #383838; -moz-box-shadow: inset 0 1px 2px 2px #000; -webkit-box-shadow: inset 0 1px 2px 2px #000; box-shadow: inset 0 1px 2px 2px #000; }

留意内阴影部分的处理。

2.3容器向下滑动的动画效果
    /*Webkit内核的浏览器增加动画效果 */ @-webkit-keyframes showMenu { from { opacity: 0; top:-20px; } to { opacity: 1; } } #appleNav { -webkit-animation: showMenu 1s; position: relative; }

阅读:()