是一种通过CSS样式来实现的效果,当鼠标悬停在一个div元素内的文本上时,会出现一个下划线动画效果。
这种效果可以通过CSS的伪类选择器和过渡动画来实现。下面是一个实现该效果的示例代码:
HTML代码:
<div class="container">
<p class="text">悬停在我上面</p>
</div>
CSS代码:
.container {
width: 200px;
height: 100px;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
}
.text {
position: relative;
display: inline-block;
}
.text::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
.text:hover::after {
transform: scaleX(1);
}
在上面的代码中,我们首先创建了一个容器div,设置了宽度、高度和背景颜色。然后在容器内部创建了一个带有文本的p元素,并给它添加了一个类名"text"。
接下来,在CSS中,我们给文本元素设置了position: relative;
,这是为了让伪元素::after
相对于文本元素进行定位。
然后,我们使用::after
伪元素来创建一个下划线,设置了它的位置、宽度、高度和背景颜色。初始状态下,我们将其宽度设置为0,通过transform: scaleX(0);
来隐藏它。
最后,我们使用过渡动画transition
来实现在鼠标悬停时,下划线的动画效果。当鼠标悬停在文本元素上时,我们将transform: scaleX(1);
来将下划线的宽度逐渐变为100%,从而展现出动画效果。
这样,当鼠标悬停在文本上时,就会出现一个下划线动画效果。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅为示例,实际使用时请根据具体需求和情况选择适合的腾讯云产品。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云