css水波浪动画效果
warning:
这篇文章距离上次修改已过433天，其中的内容可能已经有所变动。
CSS 实现水波浪动画效果可以通过使用关键帧动画和伪元素来完成。以下是一个简单的水波浪动画示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Wave Animation</title>
<style>
@keyframes wave-animation {
0% {
transform: scale(0.3) rotate(0deg);
opacity: 0.5;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 0;
}
}
.wave {
width: 200px;
height: 200px;
background: #3399FF;
border-radius: 50%;
position: relative;
overflow: hidden;
margin: 100px auto;
}
.wave::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #3399FF;
border-radius: 50%;
opacity: 0.5;
animation: wave-animation 5s linear infinite;
}
</style>
</head>
<body>
<div class="wave"></div>
</body>
</html>这段代码中定义了一个 .wave 类，它创建了一个圆形的容器，并使用 ::before 伪元素来创建水波浪的效果。@keyframes wave-animation 定义了水波浪动态改变大小和透明度的动画效果。通过将伪元素的动画设置为无限循环，你可以得到一个持续不断的水波浪动画。
评论已关闭