CSS水波纹效果

效果图:

1.创建一个div

javascript 复制代码
 <div class="point1" @click="handlePoint(1)"></div>

2.设置样式

javascript 复制代码
  .point1{
    width: 1rem;
    height: 1rem;
    background: #2ce92f;
    position: absolute;
    border-radius: 50%;
    z-index: 999;
    cursor: pointer;
  }

3.设置伪元素样式

javascript 复制代码
  .point1::after {
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background-color: #2ce92f;
    animation: dot-play 4s linear 400ms infinite;
  }
  .point1::before {
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #2ce92f;
    animation: dot-play 4s linear 200ms infinite;
    animation-delay: 2s; /* 延迟 2s */
  }

4.设置动画效果

javascript 复制代码
  @keyframes dot-play {
    from {
      transform: scale(1);
      opacity: 0.8;
    }
    to {
      transform: scale(4);
      opacity: 0.1;
    }
  }
相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist4 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端5 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友5 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端