首页
所有分类
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旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
详解CSS3中的box-sizing（content-box与border-box）
Apr 19 HTML / CSS
html5 桌面提醒：Notifycations应用介绍
Nov 27 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 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
正则表达式(3) csv(4) Coroutine(1) greenlet(1) gevent(1) 进销存(1) 信息校验(1) pytest(3) 自动播放(1) Excel(4)
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php debug 安装技巧
2011/04/30 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php unlink()函数使用教程
2018/07/12 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
vue.js的提示组件
2017/03/02 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
对Python3中的input函数详解
2018/04/22 Python
python简单操作excle的方法
2018/09/12 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python安装本地whl的实例步骤
2019/10/12 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python switch 实现多分支选择功能
2020/12/21 Python
意大利网上书店：LaFeltrinelli
2020/06/12 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
民族团结先进个人材料
2014/02/05 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
如何写自我评价？自我评价写什么好？
2014/03/14 职场文书
先进工作者事迹材料
2014/12/23 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2019入党申请书格式
2019/06/25 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript