网站建设最近在此博客中添加了一个简单的视觉效果,我很快就爱上了它:当您将博客标题悬停时,会通过从中心进行动画显示来显示链接的下划线。您可以在上面的横幅广告中尝试。创建这种效果非常容易,不需要通过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