css地震波动画

<view class="wave-container" style="position:relative"><view class="wave"></view><view class="wave"></view><view class="wave"></view></view>

/* 容器样式 */
.wave-container {position: relative;width:100%;height: 200px;display: flex;justify-content: center;align-items: center;}/* 波纹动画样式 */
.wave {position: absolute;width: 50px;height: 50px;border: 2px solid rgba(0, 150, 255, 0.7);border-radius: 50%;animation: earthquake-wave 2s infinite ease-out;opacity: 0;
}/* 波的动画效果 */
@keyframes earthquake-wave {0% {width: 80rpx;height: 80rpx;opacity: 1;}50% {opacity: 0.5;}100% {width: 200px;height: 200px;opacity: 0;}
}/* 让不同波纹稍微延迟一点 */
.wave:nth-child(2) {animation-delay: 0.3s;
}
.wave:nth-child(3) {animation-delay: 0.6s;
}