转载

HTML5标签元素下的下划线动画

最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.

HTML5标签元素下的下划线动画

创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下划线)

首先第一件事就是需要将a标签的text-decoration去掉,设置position为相对定位.然后确保这a标签在hover状态下颜色一致性.我们这里设置这个效果只在h2标签里:

代码名称

h2 > a {   position: relative;   color: #000;   text-decoration: none; }  h2 > a:hover {   color: #000; }

下一步,我们加入边框,通过一个动画来隐藏他.我们通过插入一个伪元素:before来完成,设置他的缩放为0,跟着,我们设置 visibility: hidden 来隐藏,因为有些浏览器不支持CSS这动画.

代码名称

h2 > a:before {   content: "";   position: absolute;   width: 100%;   height: 2px;   bottom: 0;   left: 0;   background-color: #000;   visibility: hidden;   -webkit-transform: scaleX(0);   transform: scaleX(0);   -webkit-transition: all 0.3s ease-in-out 0s;   transition: all 0.3s ease-in-out 0s; }

在底部,我们告诉这元素,在0.3秒内完成all动画来改变他.为了动画呈现,我们现在仅需要使这元素可见在hover状态下,且设置他的X缩放为1:

代码名称

h2 > a:hover:before {   visibility: visible;   -webkit-transform: scaleX(1);   transform: scaleX(1); }

这里的代码中我们都加了一些前缀,其实最新版的浏览器很多属性已经可以不用加入前缀,为了确保,我们加入了前缀,来完成我们的代码.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=183 ,欢迎大家传播与分享.

原文 http://www.wutongwei.com/front/infor_showone.tweb?id=183

正文到此结束

所属分类：编程技术

本文标签： CSS 博客 UI http 京东 src 标题 QQ群网站 DOM HTML node 代码 web HTML5 文章
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

HTML5标签元素下的下划线动画

代码名称

代码名称

代码名称

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流