纯css  做的水波纹动画    安卓机上没问题   但是用苹果手机测试   却出现闪屏效果

<view class='recordPart wavePart' bindtap='stopRecord' wx:if="{{recoding == false}}">

    <view class='wave wave1'><image src='/images/speaker_icon.png'></image></view>

    <view class='wave wave2'></view>

    <view class='wave wave3'></view>

    <view class='wave wave4'></view>

</view>

.wavePart {

position: relative;

}

@-webkit-keyframes opac{

from {

opacity: .5;

width:100%;

height:100%;

top:50%;

left:50%;

}

to {

opacity : 0;

width:200%;

height:200%;

top:50%;

left:50%;

}

}

.wave {

position: absolute;

top: 50%;

left: 50%;

width:100%;

height: 100%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

background-color: var(--main-color);

border-radius: 50%;

}

.wave1 {

z-index: 2;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.wave2,

.wave3,

.wave4 {

-webkit-animation: opac 3s infinite;

}

.wave3{

-webkit-animation-delay: 1s;

/*border-color: green;*/

}

.wave4{

-webkit-animation-delay: 2s;

/*border-color: red;*/

}

.wave1 image {

width: calc(var(--base-size)*76rpx);

height: calc(var(--base-size)*111rpx);

}