首页
所有分类
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 3D旋转rotate效果实例介绍
May 03 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5中的autofocus（自动聚焦）属性介绍
Apr 23 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
html5调用app分享功能示例（WebViewJavascriptBridge）
Mar 21 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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
JDK(1) 控制流(1) RecyclerView(1) 内存池(1) 云服务器(1) queue(1) Hadoop(1) Simhash(1) TaiShan(1) 九宫格(5)
You might like
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
微信小程序实现modal弹出框遮罩层组件（可带文本框）
2020/12/20 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
用Python写冒泡排序代码
2016/04/12 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
惠普加拿大在线商店：HP加拿大
2017/09/15 全球购物
计算机相关专业自荐信
2014/07/02 职场文书
ktv好的活动方案
2014/08/15 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
MySQL分区表管理命令汇总
2022/03/21 MySQL
Nginx隐藏式跳转（浏览器URL跳转后保持不变）
2022/04/07 Servers