CSS水波纹效果

最新推荐文章于 2024-08-20 08:33:57 发布

前端（从入门到入土）

最新推荐文章于 2024-08-20 08:33:57 发布

阅读量1.1k

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_45600228/article/details/137348057

版权

本文详细介绍了如何使用HTML、CSS和JavaScript在div上创建动态的点状动画，包括设置样式、伪元素动画以及关键帧定义，适合前端开发者学习和参考。

摘要由CSDN通过智能技术生成

效果图：

1.创建一个div

 <div class="point1" @click="handlePoint(1)"></div>

2.设置样式

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

3.设置伪元素样式

  .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.设置动画效果

  @keyframes dot-play {
    from {
      transform: scale(1);
      opacity: 0.8;
    }
    to {
      transform: scale(4);
      opacity: 0.1;
    }
  }