首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3绘制有活力的链接下划线

Posted in HTML / CSS onJuly 14, 2016

链接下划线是非常常见的一种样式，最近做了一个非常简单的视觉效果，非常不错，完整代码查看。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="gb2312">  
  5.   <meta name="viewport" content="width=device-width">  
  6.   <title>JS Bin</title>  
  7. <style>  
  8. body{   
  9.   background-color: #000;   
  10. }   
  11.   
  12. h2{    
  13.   text-align: center;   
  14.   margin-top: 100px;   
  15. }   
  16.   
  17. h2 > a {   
  18.   position: relative;   
  19.   color: #FFF;   
  20.   text-decoration: none;   
  21.   padding-bottom: 5px;   
  22. }   
  23.   
  24. h2 > a:hover {   
  25.   color: #FFF;   
  26. }    
  27.   
  28. h2 > a:before {   
  29.   content: "";   
  30.   position: absolute;   
  31.   width: 100%;   
  32.   height: 2px;   
  33.   bottom: 0;   
  34.   left: 0;   
  35.   background-color: #FFF;   
  36.   visibility: hidden;   
  37.   -webkit-transform: scaleX(0);   
  38.   transform: scaleX(0);   
  39.   -webkit-transition: all 0.3s ease-in-out 0s;   
  40.   transition: all 0.3s ease-in-out 0s;   
  41. }   
  42.   
  43. h2 > a:hover:before {   
  44.   visibility: visible;   
  45.   -webkit-transform: scaleX(1);   
  46.   transform: scaleX(1);   
  47. }   
  48. </style>  
  49. </head>  
  50. <body>  
  51.    <h2>  
  52.      <a href="/">悬停在我上面</a>  
  53.    </h2>  
  54. </body>  
  55. </html>  
  56.   

创建这种效果是非常简单的，不需要添加额外的DOM元素到HTML，不过需要考虑一下浏览器的兼容性问题，在老旧版本的浏览器中它只会显示为一个普通的下划线。

好了，现在正式开始。我们需要做的第一件事就是去除text-decoration，并设置链接为相对定位。我们需要确保链接在hover时不会改变颜色，这里我们拿h2举例：

CSS Code复制内容到剪贴板
  1. h2 > a {   
  2.       position: relative;   
  3.       color: #000;   
  4.       text-decoration: none;   
  5. }   
  6.   
  7. h2 > a:hover {   
  8.       color: #000;   
  9. }       
  10.   

接下来，我们要添加border，通过变换隐藏它。插入一个:before并且设置它scaleX（0），保守起见，如果浏览器不支持，我们通过visibility: hidden隐藏它。

CSS Code复制内容到剪贴板
  1. h2 > a:before {   
  2.       content: "";   
  3.       position: absolute;   
  4.       width: 100%;   
  5.       height: 2px;   
  6.       bottombottom: 0;   
  7.       left: 0;   
  8.       background-color: #000;   
  9.       visibility: hidden;   
  10.       -webkit-transform: scaleX(0);   
  11.       transform: scaleX(0);   
  12.       -webkit-transition: all 0.3s ease-in-out 0s;   
  13.       transition: all 0.3s ease-in-out 0s;   
  14. }   
  15.   

最后设置动画时间为0.3s，现在我们只需要设置元素在hover时显示并且scaleX(1)：

CSS Code复制内容到剪贴板
  1. h2 > a:hover:before {   
  2.       visibility: visible;   
  3.       -webkit-transform: scaleX(1);   
  4.       transform: scaleX(1);   
  5. }  

大功告成！

这样就完成了一个很有活力的下划线动画。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3绘制有活力的链接下划线

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5 标签
Jul 16 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
mt-swipe(1) exists(2) Mint UI(1) 慢日志(1) 远程桌面(2) REST(1) cmd(1) 相对路径 (1) 面向对象(3) 相对路径(1)
You might like
php中chdir()函数用法实例
2014/11/13 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
React服务端渲染（总结）
2017/07/01 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python时间序列缺失值的处理方法（日期缺失填充）
2019/08/11 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python猜数字算法题详解
2020/03/01 Python
python实现简单坦克大战
2020/03/27 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
美国最大的珠宝商之一：Littman Jewelers
2016/11/13 全球购物
Ref与out有什么不同
2012/11/24 面试题
会计电算化个人自我评价
2013/11/17 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
在职证明书模板
2015/06/15 职场文书