首页
所有分类
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实现背景渐变的方法
Jul 14 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
AmazeUI导航的示例代码
Aug 14 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
临时表(1) GTID(1) 游标(1) 表变量(1) ip连接(1) 重复数据(2) 排序失效(1) ECharts(3) mixin(1) timestamp(1)
You might like
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue实现搜索功能
2019/05/28 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
探究python中open函数的使用
2016/03/01 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python之时间和日期使用小结
2019/02/14 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
pandas取出重复数据的方法
2019/07/04 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
详解Python的三种拷贝方式
2020/02/11 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
bonprix荷兰网上商店：便宜的服装、鞋子和家居用品
2020/07/04 全球购物
学生自我鉴定范文
2013/10/04 职场文书
工程部经理岗位职责
2013/12/08 职场文书
初婚未育证明
2014/01/15 职场文书
学校募捐倡议书
2014/05/14 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
办护照工作证明
2014/10/01 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python与C++中梯度方向直方图的实现
2022/03/17 Python