css动画效果:实现鼠标移入菜单栏文字下出现下划线
2016-07-14 15:43
2231 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>菜单栏下划线动画</title> <style type="text/css"> body{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background-color:#2D3E50; } header nav ul{ width: 50%; padding: 0; margin: 0 auto; } header nav ul li{ display: inline-block; padding: 0 0.8em; } header nav a{ position: relative; text-decoration: none; color: #fff; display: block; padding: 1.2em 0.8em; } header nav .nav-underline:before { content: ""; position: absolute; bottom: 0; width: 0; border-bottom: 2px solid #fff; } header nav .nav-underline:hover:before { width: 80%; } header nav .nav-underline:before { -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } header nav .nav-underline-active, header nav .nav-underline-active:hover { border-bottom: 2px solid #fff; text-align: center; } </style> </head> <body> <header> <nav> <ul> <li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li> <li ><a href="#" class="nav-underline">SKILLS</a></li> <li ><a href="#" class="nav-underline">INTERESTS</a></li> <li ><a href="#" class="nav-underline">CONTACT ME</a></li> </ul> </nav> </header> </body> </html>
废话不多说先上个效果吧:效果演示
其实是个超级简单的动画,不过看到现在很多的网站在处理菜单栏的时候,一般都是用鼠标移入背景颜色变化或者字体颜色变化来告诉用户他即将访问的页面和当前所在的页面,我自己感觉这个小动画在这里比起那种效果要好看很多,所以也算替自己总结吧,就写下来了。
要用一个比较重要的选择器 :before选择器
w3cschool是这么说的:before 伪元素可以在元素的内容前面插入新内容。
首先写html代码:
<ul> <li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li> <li ><a href="#" class="nav-underline">SKILLS</a></li> <li ><a href="#" class="nav-underline">INTERESTS</a></li> <li ><a href="#" class="nav-underline">CONTACT ME</a></li> </ul>
为类名为nav-underline的a元素添加动画效果,类名为nav-underline-active表示当前页面的样式。
.nav-underline-active, .nav-underline-active:hover { border-bottom: 2px solid #fff; text-align: center; }
元素的定位很重要,将文字定位为relative,而:before定位为absolute
header nav .nav-underline { position: relative; text-decoration: none; color: #fff; display: block; } header nav .nav-underline:before { content: ""; position: absolute; bottom: 0; width: 0; border-bottom: 2px solid #fff; } header nav .nav-underline:hover:before { width: 80%; }a元素一定要设置为display:block
header nav a{ position: relative; text-decoration: none; color: #fff; display: block; padding: 1.2em 0.8em; }然后可以定义动画了,大家应该注意到hover事件下划线的width由原来的0变为80%,其实动画效果也就是改变它的宽度值,给宽度变化增加过渡效果
header nav .nav-underline:before { -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; }简单的动画已经完成啦,我把完整的代码贴出来吧:
相关文章推荐
- div+css 如何让背景层半透明 内容不透明
- CSS 模块化开发
- css让图片显示圆角 纯CSS绘制漂亮的圆形图案效果
- 用currentStyle和getComputedStyle来获取CSS非行间元素
- CSS 颜色名 颜色值
- CSS3的 transform属性,怎么才能让他同时执行多个不同动画(属性)效果
- CSS经验分享
- css3鼠标滑过图片文字动画特效
- css3-Transform与css3-Transition
- css随笔
- 好记性不如烂笔头之html和css笔记
- css限制显示字数,文字长度超出部分用省略号表示
- DIV半透明层 CSS来实现网页背景半透明
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- 彻底弄懂css中单位px和em,rem的区别
- CSS3的calc()使用
- 【内容】css3点击区域4种全屏放大显示内容动画特效
- css3
- HTML&CSS基础学习笔记1.11-导航栏
- CSS 和 JS 动画哪个会更快