效果视频
css实现文字下划线动效视频
实现思路
- 首先，插入一段文字
- 其次，为这段文字设置一个背景颜色，作为下划线的颜色。背景颜色的初始宽度设为0，初始高度设为2px；背景颜色的位置为文字的右下方
- 然后，设置鼠标移入后的效果，位置变为文字的左下方，背景颜色的宽度变为100%
- 最后，为了保证有丝滑的动态效果为这段文字设置一个过渡transition，是让背景的size有过渡效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字下划线动效</title>
<style>
div {
padding-bottom: 5px;
background: linear-gradient(to right, skyblue, pink);
width: max-content;
background-size: 0 2px;
/* no-repeat 背景铺开方式为不重复 */
background-repeat: no-repeat;
background-position: right bottom;
transition: background-size 1s;
font-family: serif bold;
}
div:hover {
background-position: left bottom;
background-size: 100% 2px;
}
</style>
</head>
<body>
<div>热爱可抵岁月漫长，温柔可挡艰难时光</div>
</body>
</html>
