首页
所有分类
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 border实现图片遮罩效果代码
Apr 09 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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
FM(4) 立体声(1) 中波(3) 调幅(1) KDKA(1) SW(1) GWEN(1) 调频(4) ad hoc(1) SWL(1)
You might like
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
设定php简写功能的方法
2019/11/28 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
解析微信JS-SDK配置授权，实现分享接口
2016/12/09 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
vue实现购物车列表
2020/06/30 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
2017/01/12 HTML / CSS
护士节活动总结
2014/08/29 职场文书
怎样写家长意见
2015/06/04 职场文书
高二化学教学反思
2016/02/22 职场文书
六年级作文之自救
2019/12/19 职场文书
Docker下安装Oracle19c
2022/04/13 Servers
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL