代码

 <!DOCTYPE html>

 <!-- 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 -->

 <html lang="en"><!-- 申明当前页面--><!-- 头部--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)-->

 <meta charset="UTF-8">

 <!--声明当前页面的三要素-->

 <title>css3动画导航效果</title>

 <title></title>

 <meta name="Keywords" content="关键字">

 <meta name="Description" content="描述">

 <!--样式 css 变漂亮 -->

 <style type="text/css">

 .menu { width: 900px;/*宽度*/ margin: 120px auto 0px auto; /*自适应浏览器居中*/ position: relative; }

 .menu .current { position: absolute;/*定位*/ bottom: 0px; background: #dddddd; height: 2px; width: 100%; }

 .nav { height: 50px;/*高度*/ /*background:#00cc99;背景颜色*/ }

 .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;/*超出去范围隐藏*/ }

 .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改变当前位置*/ }

 .nav a:hover { color: #80b600; }

 .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;/*动画过程*/ }

 .nav a.abcd { color: #80b600; }

 .nav a.abcd .bor { transform: translateX(0%); -ms-transform:translateX(0%); -o-transform:translateX(0%); -moz-transform:translateX(0%); -webkit-transform:translateX(0%); }

 </style>

 </head>

 <!-- 身体-->

 <body>

 <!--div 盒子模型 容器 可以为他设置高度 宽度 放内容 -->

 <div class="menu">

   <div class="nav"> <a href="http://www.baidu.com/">首页

     <div class="bor"></div>

     </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#">了解我们

     <div class="bor"></div>

     </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#">产品展示

     <div class="bor"></div>

     </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#">服务报价

     <div class="bor"></div>

     </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#">最新消息

     <div class="bor"></div>

     </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#">联系方式

     <div class="bor"></div>

     </a> </div>

   <div class="current"></div>

 </div>

 </body></html>

效果展示

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABB8AAADDCAIAAABF6S64AAAM7UlEQVR4nO3dMVLjPB8HYA61Z8pwhlTcIO/M3oDcgIJxQ7VDSZUCKL5yz+GvwIklW3Js+O/Lu/bzDMWS2ElWimz9LMnctAAAABFuvvsDAAAAKyFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIF6t0Ou53h+b6YwAAX3Y67nf74+m7Pwb/CdLFSjWH3S4JE81hN2r1p+N+N5tDxlyvt3ePt78W7vT+8uPu8ebu8eafl7f2989/Hm9/fTz4XMiD7y8/7p5+vrfN/fI32prm4Ku7QqXjWdknLqo0h91gl/lvx9i4PP8MXdsZmkNWF7PLLO0tTOxwOu4XV/blMww+G3856WI9FqWFSjP+t04Ef4XfP/95vLmb8/P0873b5+3h6SaLBMUX+dj+9bb0Cm2fLn43D083o6zy9vB088/LW9smSSZ9qcGrbdzVb3RzWNBQZraxyz7XXnyqLW5AVjz746lWXoPuzODSyaQkXdQrL3v90TemOex2+72ea9u2M1pAoZQmu7DN4bJTmgRPx31fCVlEPB33yYtdb2FbrbZSyZzb2Lkwh9/1emnOLsXlcf789TidmuN+u/W1PtLFui28dCtcLHJODvev50eyXn6fCrJRiNfbQe//PBaRvmy/76/ncVz58fC79MqV19+KeV35s+QEW20iozPljFOnGYjz9WXf/atwABqV55VqHlTmIF2Ma2b46OD3y7CFK+Nt214rhqwxlSvq0ORPHJq2bU+nU9u2p9PxEjVOzaF/o75OTsf9brc/HJtT6R2vfKDN6f/3xXx25St9mu7rx819SCspz478zaSLVZtxbHXt51PeHp6KYw5d0vj1fB5eaLtfF6SLySlPfZzIQ0hvs+miV+5HNk2p0784XcwgXcwzJ13kD/UVUKjf/ip4vml3GGvK34r8Lcf94+n5pVuzbOwim+tyaU2Tp6W+y9vPsjnvWWjXzl8TKuli9Gxxz9GTH0X92UkPy6ZWbLjS1kO6WJkZbThvuK79LHVZI9EPWbRt+xEhhpOgPgYZmvtk43M8OOeTZZOvmvvHc26RLiaMzo7VC3HGLr5PPV2kx7H0mms6iWY8A61Q7uWxi9GUrOQTdb8Pskr6Rls+Ii4Yu8i2T/ebfVKZSBX1d1zy9Mrl0Ws4apQ/Vdmpvt3onT591DNlYp2ki5W5Nn4/OtoOHhgex7d9dC74mPtU6b6/v/zolmU//Xxv3x6efjz8vgxcNPdZ5Mj2yl+w27H27tLFHKfjIZ+dXe+eTKqni7ytDVvKsmt122xlxXUXUz2Y+kBSba+rM6OGG+92++NpcpRiybKP1Zk9dlHdcH88Fk8qE8U6nS60rJr62EWtn3AuzlEtzmg4n24SLsisk3SxMtLFHzZ5S6hxurh/Lt/3abDXKF3kazm6V+jyiXRRNbtLX08Fw5crpIurPZqJU6Xp+4ni2MWcDmK5nkvlejrud4fjcd/NjJqssOawOxyyr0OWdlTdJxVOKrW6u0SM6ZaczVYzdlEznS7mzWQar32Z2HiyUVY2OjQa1jpJFyvz1ZlR0sUV19JFYWbUeR32YDFGZa98y9fbu8eb+5e393MIeXiWLur+9FWwBWMXifSie7KTBYzlmVHHrBLT2fqVY1iyZd7/zHtIH69UvYr7UR2NdFH2hbG4+kml3l7rz+TjW8YuJgwK+jhRhUlZdzU9Lrf66FJlrG9ihGT6Nm2sgXSxMl8duyi0+w0fnQsWjl10M6NG6yjuX/PHx+u8n5uP1HEZxPj1nAcP6WJsWboY90wu17Ar597PpIvxsuTzGT+9Lc4mVdZdDO5MWiujK5X98ZKFmVFZTfXPN4fRk+NNN11dbbXsatuWu7ET6aK48GaqL2zsYsJo3UX+TPkGajMU1ocX40EtNZRmkUoXqyNdrMwXxy5KR/sNH50LlqaL1/4GslNjF4M80N3rtrD6QrqYsjxdlG6qX79+vXzm1fAEm3dRvzZf+a9XW3eR34G0dMeouYe34rqL/LZEU8dD6WJglBhKF8SHhTRolRNLYfKaWX57ouHSnI2rxrjTcb/fzzpUjuuh2GaqKWJWujB4sUrSxcp8bezifO6YfWloeybTxWiYIosHs9NFt74iu83UeQPpYsqfTheXZ+p31/y4dX/xHc7vMpw1stkTa/2eUf3Aw9Ti6tItnQZlWe7K9jFl8jad42yz9YNhsXjSB4fjTpfxo+Ol9JLNC7kj6Q7XJbf+Sj9A9/fYhtfHttq8quniYxJgfWZmUmZZJK/OiqpPVSw+MT5oalorJF2szOJ0kT+XLqjT2kuupYv71zYbu3i5HU+LGkyFGoSHu8ebblpU+uB5abh0MWVZGF6cLoqXVvvnzz2iJIuMTsjjBrrhfFFPF+crHRNLWQrPFXpAtQvlTeUetsOe8mBgd+sHxfHYRdZi0iLuq+j86CBltFPxbcbYxamUV5LlTB+LeAqBYzO6ckmS2vnXSwmNCqaLhM1pUA9dcitcLKm20ivp4vKxutHKyreCv5V0sTKLZ0al+41WWokYQ7+eb+rporm/LONO1l2k+1bHLp6bbjZUf4Opt4enm8tfxkhWX0gXVQtH2pami8Gl1fHS0hmTiUvd4q2eTfMskaeL8TBqule5u1jqzRTSRd8jKvSNkrqfntS2TdWhnWGyTg0zR6nNDZ+7mi7SUF6cWJNfFdhexSVBMF3KNOrHD/Jz4dpHUrTZQMVktKhcAUg+1XhyVH6pgb+cdLEyy8cuahfxkie32PNJvd4OFmRXN5v8sxWjdHH5CxjV1zxPtepTxNV0UVjFsRGLe38LV3WnZ8ssxSfLUCtNZbw5pSln3UOXks4KtXikyi+nFK6PDDqsh1GXJ6+4ywFy3DfaeLqoX7jKbvZbrILaKu7RcNLll+GWWZssX3AvfK7NVtZQV5yFcdL+e56Vf5ZN8tcaNtLBU9PNsX7wO2eVDY81rYx0sV3dkeDqIXjDMzcW6aZFtW3/d7jzXn5t7GLpu5TSRfaXv6v5Z9WWX/FaNnYxXqFUaBSX06sGc013QTmdH1EesahP7P4Dkskk1ye1bdxlptOwGfn+/9dckvWSxdf/uvOxQCtbBekCAACIIV0AAAAxpAsAACCGdAEAAMSQLgAAgBjSBQAAEEO6AAAAYkgXAABADOkCAACIIV0AAAAxpAsAACCGdAEAAMSQLgAAgBjSBQAAEEO6AAAAYkgX8f5HqLvHGz9/0c93f18AYOu+tycsXcT77m/U2nx7d9nPop/v/r4AwNZ9b09YugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQAzpAgAAiCFdAAAAMaQLAAAghnQBAADEkC4AAIAY0gUAABBDugAAAGJIFwAAQIz/A39jUeJ+dbIOAAAAAElFTkSuQmCC" alt="" />

css3动画导航实现的更多相关文章

  1. 纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打

    花了一周的时间完成了 说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术 实现互联网和电信MIS网互通实现网页电话,目前只有 google ...

  2. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

  4. CSS3 动画基础

    该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html   译文:你需要知道的CSS3 动画技术 原文:Wha ...

  5. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  6. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  7. css3动画的性能优化_针对移动端卡顿问题

    这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...

  8. jQuery+css3侧边栏导航菜单

    效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...

  9. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

随机推荐

  1. 在JS函数中执行C#中的函数、字段

    1.调用字段 cs文件的代码: ; protected void Page_Load(object sender, EventArgs e) { id = ; } js页面的代码: function ...

  2. 简单LRU算法实现缓存

    最简单的LRU算法实现,就是利用jdk的LinkedHashMap,覆写其中的removeEldestEntry(Map.Entry)方法即可,如下所示: java 代码 import java.ut ...

  3. MultiSelectComboBox(二)

    1. MainWindow.xaml <Window x:Class="MultiSelectDemo.MainWindow"         xmlns="htt ...

  4. Unix网络编程--卷一：套接字联网API

    UNIX网络编程--卷一:套接字联网API 本书面对的读者是那些希望自己编写的程序能够使用成为套接字(socket)的API进行彼此通信的人. 目录: 0.准备环境 1.简介 2.传输层:TCP.UD ...

  5. 查看Mac电脑的开机记录

    回家以后,发现电脑前的地面上有烟灰.我记不住是不是我抽烟时掉的了.当然,如果不是我掉的,就是别人掉的了.要是别人掉的,估计是坐在我这玩儿电脑的时候掉的了.查一下开机记录吧.打开终端,输入“last|g ...

  6. codevs1297 硬币

    1297 硬币   题目描述 Description 我们知道即使是同一种面值的硬币,它们的重量也有可能不一样,因为它受到许多因素的影响,包括制造工艺和流程上的.但是任何一种面值的硬币的重量总是处于某 ...

  7. mysql获取当前时间，及其相关操作

    获取UNIX时间戳 : UNIX_TIMESTAMP(NOW()) 1.1 获得当前日期+时间(date + time)函数:now() 除了 now() 函数能获得当前的日期时间外,MySQL 中还 ...

  8. Linux 系统裁剪

     一.前言 Linux操作系统至1991.10.5号诞生以来,就源其开源性和自由性得到了很多技术大牛的青睐,每个Linux爱好者都为其贡献了自己的一份力,不管是在Linux内核还是开源软件等方面,都为 ...

  9. TCP、UDP

    双方都是一种网络传输协议 2.TCP需要建立连接,而UDP不需要建立连接(无连接传输) 3.是否建立真实连接的特性,造成了双方可靠性的差距. TCP属于可靠的传输协议:因为传输前双方建立好了连接,相当 ...

  10. c++ 动态分配二维数组 new 二维数组

    #include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc, _T ...