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

互联网
没有口水与汗水，就没有成功的泪水。早安！有时，我们以为赢了，其实，我们输了！因为，我们赢了＂面子＂，却输了＂里子＂！早安！

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="gb2312">
  5. <metaname="viewport"content="width=device-width">
  6. <title>JSBin</title>
  7. <style>
  8. body{
  9. background-color:#000;
  10. }
  12. h2{
  13. text-align:center;
  14. margin-top:100px;
  15. }
  17. h2>a{
  18. position:relative;
  19. color:#FFF;
  20. text-decoration:none;
  21. padding-bottom:5px;
  22. }
  24. h2>a:hover{
  25. color:#FFF;
  26. }
  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:all0.3sease-in-out0s;
  40. transition:all0.3sease-in-out0s;
  41. }
  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. <arel="nofollow noopener noreferrer" href="/">悬停在我上面</a>
  53. </h2>
  54. </body>
  55. </html>

创建这种效果是非常简单的，不需要添加额外的DOM元素到HTML，不过需要考虑一下浏览器的兼容性问题，在老旧版本的浏览器中它只会显示为一个普通的下划线。

好了，现在正式开始。我们需要做的第一件事就是去除text-decoration，并设置链接为相对定位。我们需要确保链接在hover时不会改变颜色，这里我们拿h2举例：

CSS Code复制内容到剪贴板
  1. h2>a{
  2. position:relative;
  3. color:#000;
  4. text-decoration:none;
  5. }
  7. h2>a:hover{
  8. color:#000;
  9. }

接下来，我们要添加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:all0.3sease-in-out0s;
  13. transition:all0.3sease-in-out0s;
  14. }

最后设置动画时间为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绘制有活力的链接下划线到此结束。时间并不会真的帮我们解决什么问题，它只是把原来怎样也想不通的问题，变得不再重要了。小编再次感谢大家对我们的支持！