css动画效果：实现鼠标移入菜单栏文字下出现下划线

时间  2019-12-12
标签 css 动画 效果 实现 鼠标 移入 菜单 文字 出现 下划线 栏目 CSS 繁體版
原文   原文链接
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <title>菜单栏下划线动画</title>  
  7.     <style type="text/css">  
  8.         body{  
  9.             margin: 0;  
  10.             padding: 0;  
  11.         }  
  12.         header{  
  13.             width: 100%;  
  14.             height: 100px;  
  15.             background-color:#2D3E50;   
  16.         }  
  17.         header nav ul{  
  18.             width: 50%;  
  19.             padding: 0;  
  20.             margin: 0 auto;  
  21.         }  
  22.         header nav ul li{  
  23.             display: inline-block;  
  24.             padding: 0 0.8em;  
  25.         }  
  26.         header nav a{  
  27.           position: relative;  
  28.           text-decoration: none;  
  29.           color: #fff;  
  30.           display: block;  
  31.           padding: 1.2em 0.8em;  
  32.         }  
  33.         header nav .nav-underline:before {  
  34.           content: "";  
  35.           position: absolute;  
  36.           bottom: 0;  
  37.           width: 0;  
  38.           border-bottom: 2px solid #fff;  
  39.         }  
  40.         header nav .nav-underline:hover:before {  
  41.           width: 80%;  
  42.         }  
  43.         header nav .nav-underline:before {  
  44.           -webkit-transition: width 0.5s ease-in-out;  
  45.           -moz-transition: width 0.5s ease-in-out;  
  46.           -ms-transition: width 0.5s ease-in-out;  
  47.           -o-transition: width 0.5s ease-in-out;  
  48.           transition: width 0.5s ease-in-out;  
  49.         }  
  50.         header nav .nav-underline-active,  
  51.         header nav .nav-underline-active:hover {  
  52.           border-bottom: 2px solid #fff;  
  53.           text-align: center;  
  54.         }  
  55.     </style>  
  56. </head>  
  57. <body>  
  58.     <header>  
  59.         <nav>  
  60.             <ul>  
  61.                 <li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li>  
  62.                 <li ><a href="#" class="nav-underline">SKILLS</a></li>  
  63.                 <li ><a href="#" class="nav-underline">INTERESTS</a></li>  
  64.                 <li ><a href="#" class="nav-underline">CONTACT ME</a></li>  
  65.             </ul>  
  66.         </nav>  
  67.     </header>  
  68. </body>  
  69. </html>  


废话很少说先上个效果吧：效果演示css

        实际上是个超级简单的动画，不过看到如今不少的网站在处理菜单栏的时候，通常都是用鼠标移入背景颜色变化或者字体颜色变化来告诉用户他即将访问的页面和当前所在的页面，我本身感受这个小动画在这里比起那种效果要好看不少，因此也算替本身总结吧，就写下来了。html

         要用一个比较重要的选择器 :before选择器web

        w3cschool是这么说的：before 伪元素能够在元素的内容前面插入新内容。字体

          首先写html代码：动画

[html]  view plain  copy
 
  1. <ul>  
  2.     <li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li>  
  3.     <li ><a href="#" class="nav-underline">SKILLS</a></li>  
  4.     <li ><a href="#" class="nav-underline">INTERESTS</a></li>  
  5.     <li ><a href="#" class="nav-underline">CONTACT ME</a></li>  
  6. </ul>  


为类名为nav-underline的a元素添加动画效果，类名为nav-underline-active表示当前页面的样式。网站

 

 

[html]  view plain  copy
 
  1.  .nav-underline-active,  
  2.  .nav-underline-active:hover {  
  3.      border-bottom: 2px solid #fff;  
  4.      text-align: center;  
  5. }  


元素的定位很重要，将文字定位为relative，而:before定位为absolutespa

[html]  view plain  copy
 
  1. header nav .nav-underline {  
  2.           position: relative;  
  3.           text-decoration: none;  
  4.           color: #fff;  
  5.           display: block;  
  6.         }  
  7. header nav .nav-underline:before {  
  8.           content: "";  
  9.           position: absolute;  
  10.           bottom: 0;  
  11.           width: 0;  
  12.           border-bottom: 2px solid #fff;  
  13.         }  
  14. header nav .nav-underline:hover:before {  
  15.           width: 80%;  
  16.         }  

a元素必定要设置为display:block.net

 

 

[html]  view plain  copy
 
  1. header nav a{  
  2.           position: relative;  
  3.           text-decoration: none;  
  4.           color: #fff;  
  5.           display: block;  
  6.           padding: 1.2em 0.8em;  
  7.         }  

而后能够定义动画了，你们应该注意到hover事件下划线的width由原来的0变为80%,其实动画效果也就是改变它的宽度值，给宽度变化增长过渡效果xml

 

 

[html]  view plain  copy
 
  1. header nav .nav-underline:before {  
  2.           -webkit-transition: width 0.5s ease-in-out;  
  3.           -moz-transition: width 0.5s ease-in-out;  
  4.           -ms-transition: width 0.5s ease-in-out;  
  5.           -o-transition: width 0.5s ease-in-out;  
  6.           transition: width 0.5s ease-in-out;  
  7.         }  

简单的动画已经完成啦，我把完整的代码贴出来吧：htm

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程