css 水波 动画 |css 中英文不同字号

/* 定义水波元素的基础样式 */
.water {
position: relative;
width: 300px;
height: 200px;
background: #6CCEE2;
overflow: hidden;
}
/* 定义水波动画 keyframes */
@keyframes water-wave {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 10px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
/* 定义水波类 wave */
.wave {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
animation: water-wave 2s linear infinite;
bottom: -25%;
left: 0;
}

以上代码中，先定义了一个名为 water 的元素，使其具有相对定位、固定宽高等基础样式。接着使用 @keyframes 关键字定义了名为 water-wave 的动画。在动画过程中，元素会根据时间轴逐渐改变位置，最终形成水波的效果。最后，在元素的伪类 .wave 中使用了定义的动画，使得水波效果得以呈现出来。

通过以上代码，您可以轻松实现一个简单的水波动画，并将其运用于网页设计中。当然，水波动画的变化形式还有很多，您可以根据需要自行调整样式和动画，使水波效果更加符合网页设计风格和需要。