css 文字下划线渐变波浪动画
时间: 2023-07-25 08:24:12 浏览: 66
可以在文字下方添加一个伪元素,然后使用CSS的渐变和动画属性来实现文字下划线渐变波浪动画。以下是一个基本的实现示例:
HTML代码:
```html
<p class="underline">Hello World</p>
```
CSS代码:
```css
.underline {
position: relative;
display: inline-block;
text-decoration: none;
color: #333;
font-size: 24px;
font-weight: bold;
}
.underline::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #fff, #999);
background-size: 100% 50px;
background-position: 0 50px;
animation: wave 1s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
transform: translateZ(0);
}
@keyframes wave {
0% {
background-position: 0 50px;
}
100% {
background-position: 100% 50px;
}
}
```
通过设置`.underline`元素的`position`属性为`relative`,然后在其下方添加一个`::after`伪元素,通过设置`position: absolute`将其定位到文字下方,然后使用和上一个回答中类似的方式实现渐变波浪动画。同时,为了避免3D加速带来的渲染问题,可以使用`transform: translateZ(0)`来关闭3D加速。