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;
    }
  }
相关推荐
草莓熊Lotso36 分钟前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
Olrookie1 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6452 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
莫的感情2 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥3 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python3 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_3 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐3 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊3 小时前
C语言bsearch的使用
java·c语言·前端