CSS3绘制有活力的链接下划线

  发布时间:2016-07-14 15:33:50   作者:佚名   我要评论
这篇文章主要为大家详细介绍了CSS3有活力的链接下划线绘制方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

链接下划线是非常常见的一种样式,最近做了一个非常简单的视觉效果,非常不错,完整代码查看。

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. }  

大功告成!

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

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

相关文章

  • CSS3制作hover下划线动画

    本文主要介绍了CSS3制作hover下划线动画的方法步骤。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-27
  • CSS3简单带下划线跟随下拉菜单特效源码

    这是一套使用纯CSS3制作的带下划线跟随效果的下拉菜单特效的代码,通过CSS3 transform和transition来制作。欢迎下载使用
    2016-10-17
  • CSS中的下划线text-decoration属性使用进阶

    这篇文章主要介绍了CSS中的下划线text-decoration属性使用进阶,文章前面则使用摘自w3cschool的基本使用知识进行小回顾,需要的朋友可以参考下
    2015-08-12
  • CSS3实现下划线跟随动画且背景色渐变菜单源码

    一款CSS3实现的动画菜单,这款菜单的特点就是有一条下划线跟随鼠标移动,当鼠标滑过菜单项时,下划线跟随动画就会出现,并对当前激活的菜单项进行下划线加粗。此外,菜单项
    2014-06-19
  • div css布局命名时尽量避免下划线

    用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用_style这样的命名,可以让IE外的大部分浏览器忽略这个样式的定义。这篇文章主要为大家介绍了css布局命名时
    2014-06-16
  • 使用CSS去掉网页中超链接的下划线示例

    下面为大家展示一个实例:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色,感兴趣的
    2013-06-21
  • 不可思议的CSS导航栏下划线跟随效果

    这篇文章主要介绍了纯CSS实现导航栏下划线跟随效果,本文图文并茂实例代码详解,给大家介绍的非常详细,需要的朋友参考下吧
    2019-12-09

最新评论