css-实现光波效果

最新推荐文章于 2024-08-30 05:12:30 发布

佛佛ง

最新推荐文章于 2024-08-30 05:12:30 发布

阅读量1.1k

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/LzzMandy/article/details/102403836

版权

CSS学习笔记专栏收录该内容

26 篇文章 2 订阅

订阅专栏

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