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 相关文章推荐
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
CSS list-style-type属性使用方法
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
You might like
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
Django时区详解
2019/07/24 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
怎样创建、运行java程序
2014/08/01 面试题
软件工程专业推荐信
2013/10/28 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
护士辞职信范文
2014/01/19 职场文书
英语简历自我评价
2014/01/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
人事文员岗位职责
2015/02/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
简爱读书笔记
2015/06/26 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技