首页
所有分类
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的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML基础详解（下）
Oct 16 HTML / CSS
HTML基本元素标签介绍
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
for(1) 索尼ICF-36(1) cvzone(1) SnakeGame(1) mediapipe(1) while(1) 德生2P3(1) python小游戏(5) 计算机视觉(2) 贪吃蛇(2)
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
python简单猜数游戏实例
2015/07/09 Python
Python切片知识解析
2016/03/06 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python实现机器学习之元线性回归
2018/09/06 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
花园仓库建筑：Garden Buildings Direct
2018/02/16 全球购物
淘宝中秋节活动方案
2014/01/31 职场文书
交通事故私了协议书
2014/04/16 职场文书
委托函范文
2015/01/29 职场文书
校运会广播稿
2015/08/19 职场文书
找规律教学反思
2016/02/23 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python