纯css3实现水波纹从中心向四周扩散动画
warning:
这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。
以下是一个使用纯CSS3实现的水波纹从中心向四周扩散的动画示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Wave Ripple Animation</title>
<style>
.wave {
width: 200px;
height: 200px;
background: #f0f0f0;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.wave::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150%;
height: 150%;
background: rgba(0, 0, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: ripple 5s infinite linear;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="wave"></div>
</body>
</html>这段代码中，.wave 类用于创建一个圆形的容器，.wave::before 伪元素用于创建水波纹的效果。@keyframes ripple 定义了水波纹的动画，从初始的无显示（透明度为0），到水波纹最大（透明度为1）。这个动画是无限循环的，并且以线性的速度进行。
评论已关闭