/* 设置波浪的颜色 */
:root {
--wave-color: #46cdcf;
}
/* 添加波浪动画 */
.wave {
background-color: var(--wave-color);
position: relative;
height: 100px;
width: 100%;
}
.wave:before,
.wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
background-color: var(--wave-color);
}
.wave:before {
top: -25%;
left: -25%;
width: 150%;
padding-bottom: 150%;
animation: animate 4s linear infinite;
}
.wave:after {
bottom: -25%;
right: -25%;
width: 150%;
padding-bottom: 150%;
animation: animate2 2s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}这段代码创建了一个波浪动画，允许CSS伪元素:before和:after来创建两个椭圆形。这两个椭圆形通过使用CSS transform属性，根据两个不同的动画函数进行旋转。将椭圆形加到背景上，就可以产生动态波浪的效果。使用 :root可以定义一个变量，使颜色的更改更为容易。通过更改CSS变量，可以更改波浪的颜色。
总体来说，CSS动态波兰线是一个很有趣和创造性的特效。通过掌握这个技巧，你可以在你的页面中引入许多动态和吸引用户的效果。下次你在设计网站时，不妨尝试一下 CSS动态波兰线，你会被它的效果惊喜到的。