首页
所有分类
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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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) Android Gradle(1) maven(2) Kotlin(1) 验证表达式(1) 动态权限(1) V Rising(1) redis(3) Spring Security(2) AOP(2)
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
javascript 面向对象,实现namespace,class,继承，重载
2009/10/29 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
js实现微信分享代码
2020/10/11 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
2018/11/13 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python 无损批量压缩图片（支持保留图片信息）的示例
2020/09/22 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
如何用Python 实现全连接神经网络（Multi-layer Perceptron）
2020/10/15 Python
python re的findall和finditer的区别详解
2020/11/15 Python
伦敦高达60%折扣的钻石珠宝商：Purely Diamonds
2018/06/24 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
学生生病请假条范文
2014/02/16 职场文书
建议书标准格式
2014/03/12 职场文书
安全生产宣传标语
2014/06/06 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
python实现学员管理系统(面向对象版)
2022/06/05 Python