css3动画导航实现

最新推荐文章于 2022-12-31 14:45:25 发布

weixin_30321449

最新推荐文章于 2022-12-31 14:45:25 发布

阅读量325

点赞数

原文链接：http://www.cnblogs.com/weilantiankong/p/4684242.html

版权

代码

 1 <!DOCTYPE html>
 2 <!-- saved from url=(0223)file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%90%88/%E4%B8%80%E5%8F%B7%E5%88%86%E4%BA%ABcss3%E6%BB%91%E5%8A%A8%E5%AF%BC%E8%88%AA.html -->
 3 <html lang="en"><!-- 申明当前页面--><!-- 头部--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)-->
 5 <meta charset="UTF-8">
 6 <!--声明当前页面的三要素-->
 7 <title>css3动画导航效果</title>
 8 <title></title>
 9 <meta name="Keywords" content="关键字">
10 <meta name="Description" content="描述">
11 <!--样式 css 变漂亮 -->
12 <style type="text/css">
13 .menu { width: 900px;/*宽度*/ margin: 120px auto 0px auto; /*自适应浏览器居中*/ position: relative; }
14 .menu .current { position: absolute;/*定位*/ bottom: 0px; background: #dddddd; height: 2px; width: 100%; }
15 .nav { height: 50px;/*高度*/ /*background:#00cc99;背景颜色*/ }
16 .nav a { position: relative; z-index: 9999;/*当前所在位置*/ color: #666666;/*文字颜色*/ text-decoration: none; /*去除下划线*/ display: block;/*行元素转为块元素*/ float: left;/*浮动*/ height: 50px; line-height: 50px;/*文字垂直*/ padding: 0px 40px;/*内边距改变自身宽度*/ font-family: "微软雅黑"; font-size: 16px;/*文字字体 大小*/ overflow: hidden;/*超出去范围隐藏*/ }
17 .nav a .bor { background: #80b600; height: 2px; width: 100%; position: absolute; left: 0px; bottom: 0px; transform: translateX(-100%); -ms-transform:translateX(-100%); -o-transform:translateX(-100%); -moz-transform:translateX(-100%); -webkit-transform:translateX(-100%); /*css3改变当前位置*/ }
18 .nav a:hover { color: #80b600; }
19 .nav a:hover .bor { transform: translateX(0%); -ms-transform:translateX(0%); -o-transform:translateX(0%); -moz-transform:translateX(0%); -webkit-transform:translateX(0%); transition: all 800ms ease; -moz-transition: all 800ms ease; -o-transition: all 800ms ease; -webkit-transition: all 800ms ease;/*动画过程*/ }
20 .nav a.abcd { color: #80b600; }
21 .nav a.abcd .bor { transform: translateX(0%); -ms-transform:translateX(0%); -o-transform:translateX(0%); -moz-transform:translateX(0%); -webkit-transform:translateX(0%); }
22 
23 </style>
24 </head>
25 <!-- 身体-->
26 <body>
27 <!--div 盒子模型 容器 可以为他设置高度 宽度 放内容 -->
28 <div class="menu">
29   <div class="nav"> <a href="http://www.baidu.com/">首页
30     <div class="bor"></div>
31     </a> <a href="file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%90%88/%E4%B8%80%E5%8F%B7%E5%88%86%E4%BA%ABcss3%E6%BB%91%E5%8A%A8%E5%AF%BC%E8%88%AA.html#">了解我们
32     <div class="bor"></div>
33     </a> <a href="file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%90%88/%E4%B8%80%E5%8F%B7%E5%88%86%E4%BA%ABcss3%E6%BB%91%E5%8A%A8%E5%AF%BC%E8%88%AA.html#">产品展示
34     <div class="bor"></div>
35     </a> <a href="file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%90%88/%E4%B8%80%E5%8F%B7%E5%88%86%E4%BA%ABcss3%E6%BB%91%E5%8A%A8%E5%AF%BC%E8%88%AA.html#">服务报价
36     <div class="bor"></div>
37     </a> <a href="file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%90%88/%E4%B8%80%E5%8F%B7%E5%88%86%E4%BA%ABcss3%E6%BB%91%E5%8A%A8%E5%AF%BC%E8%88%AA.html#">最新消息
38     <div class="bor"></div>
39     </a> <a href="file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%90%88/%E4%B8%80%E5%8F%B7%E5%88%86%E4%BA%ABcss3%E6%BB%91%E5%8A%A8%E5%AF%BC%E8%88%AA.html#">联系方式
40     <div class="bor"></div>
41     </a> </div>
42   <div class="current"></div>
43 </div>
44 
45 
46 
47 </body></html>

效果展示

转载于:https://www.cnblogs.com/weilantiankong/p/4684242.html

weixin_30321449

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画导航实现

代码 1 <!DOCTYPE html> 2 <!-- saved from url=(0223)file:///C:/Users/user/AppData/Local/Temp/HZ$D.187.4185/HZ$D.187.4186/%E7%BE%A4%E5%8F%8B%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%E9%9B%86%E5%...
复制链接

扫一扫