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.       positionrelative;   
  3.       color#000;   
  4.       text-decorationnone;   
  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.       positionabsolute;   
  4.       width: 100%;   
  5.       height2px;   
  6.       bottombottom: 0;   
  7.       left: 0;   
  8.       background-color#000;   
  9.       visibilityhidden;   
  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.       visibilityvisible;   
  3.       -webkit-transform: scaleX(1);   
  4.       transform: scaleX(1);   
  5. }  

大功告成!

这样就完成了一个很有活力的下划线动画。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
CSS中实现动画效果-附案例
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
You might like
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
js date 格式化
2017/02/15 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
js如何验证密码强度
2020/03/18 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python使用matplotlib库生成随机漫步图
2018/08/27 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python调用C语言程序方法解析
2020/07/07 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
《自然之道》教学反思
2014/02/11 职场文书
奠基仪式主持词
2014/03/20 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
寒山寺导游词
2015/02/03 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server