css-实现光波效果

1、dom结构（微信小程序结构）

<view class="status">
        <image src="../../assets/home/stoping.png"></image>
        <view class="animate1"></view>
        <view class="animate2"></view>
</view>

 2、样式

.stoping .status {
    width: 96rpx;
    height: 96rpx;
    position: relative;
}

.stoping .status image {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    left: 0;
    top: 0;
}

.stoping .status .animate1, .stoping .status .animate2 {
    background: #fff;
    width: 96rpx;
    height: 96rpx;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

3、动画

@keyframes circle {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

4、分别给.animate1  、.animate2设置动画的效果

.stoping .status .animate1 {
    -webkit-animation: circle 5s 0s ease-out infinite running;
    animation: circle 5s 0s ease-out infinite running;
}

.stoping .status .animate2 {
    -webkit-animation: circle 5s 2s ease-out infinite running;
    animation: circle 5s 2s ease-out infinite running;
}