前端圆形倒球体环绕/波纹动态图

知识点：

animation||@keyframes(动画)使用

image.png

     <view class="left_box" v-if="time!=0">
        <view class="left_item"></view>
     </view>
</view>

<style>
    .box {
        /* 最外层的盒子 */
        width: 240rpx;
        height: 240rpx;
        margin: 0 auto;
        position: relative;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 20px;
        border: 1px solid #8F8F8F;
    }

    .left_box {
        /* 
        球的父盒子，旋转带动球旋转
      */
        position: absolute;
        top: -6rpx;
        left: -6rpx;
        bottom: -6rpx;
        right: -6rpx;
        width: 252rpx;
        height: 252rpx;
        overflow: hidden;
        z-index: 1;
        border-radius: 50%;
        animation: loading_left 15s linear;

    }

    .left_item{
        /* 
      小球位于父盒子边中间
      */
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background-color: #8F8F8F;
        margin: 0 auto;
    }


    .mask {
        /* 中间倒计时部分，和圆环的内圆 */
        position: absolute;
        top: 6rpx;
        left: 6rpx;
        right: 6rpx;
        bottom: 6rpx;
        z-index: 2;
        border-radius: 50%;
        background-color: #fff;
        text-align: center;
        opacity: 0.3;
        background: #EDEDED;
        border: 6rpx solid #8F8F8F;
        line-height: 226rpx;
        font-size: 112rpx;
        color: #999999;
        text-align: center;
        font-weight: 700;
    }
    /* 动画 */
    @keyframes loading_left {
       to {
              transform: rotate(1turn);
          }
    }
</style>

image.png

<view class="newDateTime" v-if="showTime">
    <view class="meetStatusOut">
<div class="WaterGread" v-show="!_self.status"></div>
</view>

<style>
    .WaterGread {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color:#38b97300;
                /* 水波纹的颜色 */
                border-radius: 50%;
                overflow: hidden;
                z-index: 1;
                /* 确保水波纹在文字之上 */
            }
.newDateTime {
                /* background-color: white; */
            color: white;
            font-size: 80rpx;
            line-height: 100rpx;
            padding: 10rpx;
            /* height: 200rpx !important; */
            border-radius: 10px;
            margin-bottom: 10px;
            /* line-height: normal; */
            text-align: center;
            margin: calc(25%) 0px;
            /* 设置外层容器的内边距 */
}
            .meetStatus {
                /* 圆形容器的阴影样式 */
                overflow: hidden;
                /* 确保容器裁剪水波纹效果 */
                cursor: pointer;
                /* 鼠标悬停时显示手型光标 */
            }

        
            .WaterGread::after {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 150%;
                height: 150%;
                border-radius: 40%;
                background-color:rgb(57 203 68 / 50%);
                /* 水波纹内部颜色 */
                animation: real 60s linear infinite;
                /* 实际水波纹的动画效果 */
            }
.WaterRed::after {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 150%;
                height: 150%;
                border-radius: 40%;
                background-color:rgb(170 0 0 / 50%);
                /* 水波纹内部颜色 */
                animation: real 60s linear infinite;
                /* 实际水波纹的动画效果 */
            }
            @keyframes real {
                0% {
                    /* 初始状态：向上平移50%、左平移65%并旋转0度 */
                    transform: translate(-100%, -100%) rotate(360deg);
                
                }

                100% {
                    /* 终止状态：向上平移50%、左平移65%并旋转360度，形成旋转一周的效果 */
                        transform: translate(50%, 65%) rotate(0deg);
                }
            }
</style>