CSS 下划线动画效果是一个很酷的效果,让你的页面变得更加生动有趣。下面我们来看一下怎么实现这个效果。/* 定义下划线动画的样式 */ .underline { position:relative;
CSS 下划线动画效果是一个很酷的效果,让你的页面变得更加生动有趣。下面我们来看一下怎么实现这个效果。
/* 定义下划线动画的样式 */
.underline {
position:relative;
display:inline-block;
}
.underline:after {
content:"";
position:absolute;
left:0;
bottom:-2px;
width:100%;
height:2px;
background-color:#f00;
transform:scaleX(0);
transform-origin:right;
transition: transform 0.5s ease-in-out 0s;
}
.underline:hover:after {
transform:scaleX(1);
transform-origin:left;
}
首先我们给需要添加下划线动画的文本添加一个类名为"underline"的样式。
然后我们使用:after伪元素添加一个下划线。这个伪元素的位置是绝对定位的,并且在父元素的底部。默认情况下下划线是不可见的(transform: scaleX(0);)。当:hover伪类存在时,下划线将从右侧到左侧逐渐放大(transform: scaleX(1);),从而显现出来。
最后我们还使用transition属性使得下划线的动画变得更加平滑自然。
<p class="underline">这是一段需要添加下划线动画的文本</p>
最后我们只需要在需要添加下划线动画的文本上添加类名"underline"即可。
粉丝
0
关注
0
收藏
0