坐标点缩放闪烁 从中心向四周扩散

 

 

1、html

<view class="box">
    <view class="point"></view>
  </view>

2、css

.box {
  position: relative;
}

.point, .point:before , .point:after {
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #ff3344;
  content: '';
}

.point {
  top: 200rpx;
  left: 200rpx;
}

.point:before {
  animation: scale1 2s linear infinite;
}

.point:after {
  animation: scale2 2s linear infinite;
}

@keyframes scale1 {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(6);
    opacity: 0;
  }
}

@keyframes scale2 {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(12);
    opacity: 0;
  }
}