实现一个放大缩小类似水波扩散标记点效果

多年以前，在看CCTV新闻时，电视中经常会出现上图所示的画面，用动态缩放的圆形来显示发生大事件的位置，当时就很好奇，这样的效果是如何做出来的呢？

接下来上干货，从零开始一步步实现它。

1 动画效果分析

我们仔细观察上面的动图，有一个实心的红色圆点，它的位置和大小始终不变，与该红色圆点同圆心的两个圆，不断沿半径方向扩大，扩大的同时逐渐变得透明，最后消失在画面中，该过程周而复始，形成类似水波扩散的效果。

2 实现思路

• 在目标位置放置一个实心圆标记位置
• 在同样的位置再放置两个圆
• 利用 transform: scale() 放大这两个圆
• 利用 opacity 改变这两个圆的透明度
• 最后利用 animation实现循环关键帧动画

3 实现过程

考虑到动画中只涉及三个元素，我们可以使用一个实体 div，外加 ::before 和 ::after两个伪元素来实现。这样DOM结构就相当简单了。

<div class="circle">

接下来为元素添加样式，将它放置在页面合适的位置。

.circle{
  top: 460px;
  left: 1009px;
}

.circle, 
.circle::before, 
.circle::after{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 1000;
  content: '';
}

需要格外注意的是，上面两条CSS规则必须单独写，不能合并，否则后面的动画会失效。

现在，用于定位的红色圆点已经出现在了画面中。接下来添加动画。

@keyframes larger1 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

.circle::before {
  animation: larger1 2s infinite;
}

现在动态效果已经有了，但是还不够饱满，我们继续添加另一个圆的放大效果。

@keyframes larger2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

.circle::before {
  animation: larger1 2s infinite;
}

注意，这里我们将 ::after 伪元素的放大倍数变成了10，在上一步中， ::before 伪元素的放大倍数是5。这样做的目的是让动画最后一刻两个外围圆大小不一样，这样实现的效果更为饱满。

到这里，我们的动态缩放类似水波扩散的标记点效果就完成啦。

学习