网站建设最近在此博客中添加了一个简单的视觉效果，我很快就爱上了它：当您将博客标题悬停时，会通过从中心进行动画显示来显示链接的下划线。您可以在上面的横幅广告中尝试。创建这种效果非常容易，不需要通过HTML添加任何其他DOM元素，并且对于不支持CSS动画的浏览器来说效果很好（它会显示为常规下划线）。
我们需要做的第一件事是关闭text-decoration，并将链接设置position为relative。为简单起见，我们还要确保链接不会在悬停时更改颜色。在这里，我们将效果应用于h2s中的所有链接元素：
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
接下来，我们要添加边框，并通过转换将其隐藏。为此，我们将其插入:before，并将其X缩放比例设置为0。作为后备，我们将其隐藏visibility: hidden在不支持CSS动画的浏览器中。
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
在最底部，我们告诉元素以0.3秒为单位对应用到它的所有更改进行动画处理。为了使动画出现，现在我们只需要使该元素在上再次可见hover，并将其X比例设置回1：
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
就是这样！从16.0版开始（一年多），Firefox就支持animation和transform不支持moz前缀，因此我在代码中省略了前缀。为了安全起见，应将和添加到所有动画和变换中。-o-moz
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/259391.html