使用css3制作动感导航条示例
发布时间：2014-01-26 11:01:22 作者：佚名 
我要评论
我要评论本文介绍了使用css3制作动感导航条示例，纯CSS没有使用JS，没有图片的导航条。用到了CSS3的Transition、box-shadow、linear-gradient
越来越喜欢CSS3的Transition属性
HTML:
复制代码
代码如下:<div class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">LIFE</a></li>
<li><a href="#">WEB</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">PIC</a></li>
<li><a href="#">ABOUT</a></li>
</div>
CSS:
复制代码
代码如下:<style>
body{
background:#EDEDED;
}</p> <p>.nav{
width:606px;
margin:100px auto 0 auto;
}</p> <p>li{
width:100px;
height:30px;
list-style:none;
float:left;
margin-left:-1px;</p> <p> /*菜单文字排版*/
line-height:26px;
text-align:center;
letter-spacing:3px;</p> <p> /*设置菜单边框*/
border:1px solid #B2B2B2;
border-radius:3px;</p> <p> /*设置菜单阴影*/
-webkit-box-shadow:0 1px 2px #CDCDCD;
box-shadow:0 1px 2px #CDCDCD;</p> <p> /*设置菜单动画*/
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
}</p> <p>a{
width:96px;
height:28px;
display:inline-block;</p> <p> /*设置链接样式*/
color:#999;
font-size:10px;
font-family:Verdana,sans-serif;
text-decoration:none;</p> <p> /*webkit文字大小*/
-webkit-text-size-adjust:none;
/*设置边框*/
border:2px solid #FFF;
border-bottom:none;
border-radius:3px;</p> <p> /*菜单背景渐变*/
background:-webkit-linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);
background:-moz-linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);
background:linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);
}</p> <p>li:hover{
margin-top:-8px;
}</p> <p>a:hover{
color:#777;
}
</style>
相关文章
- 这篇文章主要介绍了CSS3中的字体及相关属性，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-06-12
- 本文详细解析了CSS3中实现账号密码输入框提示特效的原理和方法，包括HTML5的placeholder属性与CSS3新特性如伪类选择器、动态效果和过渡动画的结合使用，感兴趣的朋友跟随小2025-05-14
- CSS3的布局特性为前端开发者提供了无限可能，无论是Flexbox的一维布局还是Grid的二维布局，它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局，本文给大家介绍C2025-05-14
CSS3 Facebook-style Buttons 项目常见问题及最新解决方案
CSS3 Facebook-style Buttons 是一个开源项目，旨在通过简单的 CSS 代码来重现 Facebook 按钮和工具栏的外观，本文给大家介绍CSS3 Facebook-style Buttons 项目常见问题及2025-05-14使用animation.css库快速实现CSS3旋转动画效果
随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及其在实际项目中的应用,感兴趣的朋友一起看2025-05-14
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19
最新评论