css地震波动画

xml 复制代码
<view class="wave-container" style="position:relative">

    <view class="wave"></view>
    <view class="wave"></view>
     <view class="wave"></view>
  </view>
css 复制代码
/* 容器样式 */
.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;
}
相关推荐
0wioiw03 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠28 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯35 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调42 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined244 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js