知识点：
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>
