使用css3制作动感导航条示例


Posted in HTML / CSS onJanuary 26, 2014

越来越喜欢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>

HTML / CSS 相关文章推荐
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 #HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 #HTML / CSS
css图标制作教程制作云图标
Jan 19 #HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 #HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 #HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 #HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
You might like
php仿discuz分页效果代码
2008/10/02 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php 字符串替换的方法
2012/01/10 PHP
php实现无限级分类
2014/12/24 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
vue实现计步器功能
2019/11/01 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python类如何定义私有变量
2020/02/03 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
办公室主任岗位承诺书
2014/05/29 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL