css 实现涟漪效果

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: