css实现涟漪效果

最近写小程序直播，需要一个闪动的涟漪效果，很简单的效果代码及思路如下

html代码：

<view class="circle"> <view class="ripples"></view> </view>

circle为内置黄色圆圈，ripples为由内向外扩散的波纹

css代码：

.circle{
  position: fixed;
  top:300rpx;
  left: 300rpx;
  border-radius: 75rpx;
  border:1rpx solid red;
  height: 150rpx;
  width:150rpx;
  background: orange;
}
.ripples{
  position: absolute;
  top: 2rpx;
  left: 2rpx;
  width: 146rpx;
  height: 146rpx;
  border-radius: 75rpx;
  animation: ripplesone 1s 2s infinite;
}
@keyframes ripplesone {
  0% {
    transform-origin: 75rpx 75rpx;
    transform: scale(1);
    opacity: 0;
    border: 2rpx solid #FF3434;
  }

  5% {
    transform-origin: 75rpx 75rpx;
    transform: scale(1.1);
    opacity: 1;
    border: 2rpx solid #FF3434;
  }

  100% {
    transform-origin: 75rpx 75rpx;
    transform: scale(1.3);
    opacity: 0;
    border: 2rpx solid #FF3434;
  }
}

animation: ripplesone 1s 2s infinite;
rippleone为动画名称，1s 为动画执行一周时间,2s为进入页面后延迟两秒执行（仅首次延迟）,infinite为循环执行该动画，
transform-origin: 75rpx 75rpx;
这是确认向外扩散涟漪的中心点,我设置的宽度为ripples宽度加上边框宽度后的一半,这样就在圆的中心向外扩散，
transform: scale(1.3);
transform的scale可以控制放大和缩小，小于1为缩小。