IOS css动画闪屏
纯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);
}
