<html>
<header>
</header>
<style>
.title {
line-height: 2;
}
.back_color {
background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
background-size: 0 2px;
transition: background-size 1000ms;
padding-bottom: 5px;
}
.back_color:hover {
background-position-x: left;
background-size: 100% 2px;
}
</style>
<body>
<div class="title">
<span class="back_color">
这是一个有背景颜色的一段话,鼠标放上去,这是一个有背景颜色的一段话,鼠标放上去这是一个有背景颜色的一段话,鼠标放上去这是一个有背景颜色的一段话,鼠标放上去这是一个有背景颜色的一段话,鼠标放上去
</span>
</div>
</body>
</html>
有颜色背景
于 2023-05-15 08:59:53 首次发布