纯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); }