html
<view class="body">
<view class="circle"></view>
<view class="circle1"></view>
<view class="circle2"></view>
</view>
css
.body{
height: 100vh;
background-color: #F5F6F7;
position: relative;
}
.circle{
position: absolute;
left:250rpx;
top:250rpx;
width: 250rpx;
height: 250rpx;
border-radius: 50%;
background:-webkit-linear-gradient(top,#6DFB93,#3EDF90);
opacity: 1;
}
.circle1{
position: absolute;
left:225rpx;
top:225rpx;
width: 300rpx;
height: 300rpx;
border-radius: 50%;
background:-webkit-linear-gradient(top,#6DFB93,#3EDF90);
opacity: 0.6;
animation:myfirst1 5s infinite linear
}
.circle2{
position: absolute;
left:200rpx;
top:200rpx;
width: 350rpx;
height: 350rpx;
border-radius: 50%;
background:-webkit-linear-gradient(top,#6DFB93,#3EDF90);
opacity: 0.3;
animation:myfirst2 5s infinite linear;
animation-delay:5s;
}
@keyframes myfirst1{
0% {opacity: 0.5;scale: 1;}
50% {opacity: 0.4;scale: 1.5;
100% {opacity: 0.3;scale: 2;}
}
@keyframes myfirst2{
0% {opacity: 0.2;scale: 1.75;}
50% {opacity: 0.1;scale: 1.9;}
100% {opacity: 0;scale: 2.15 ;}
}
//在微信开发者工具模拟器上是图下这个效果，但是在真机模拟上出现了误差，最终发现问题是。scale的问题，最终解决是如下
@keyframes myfirst1{
0% {opacity: 0.5; transform:scale(1) ;}
50% {opacity: 0.4;transform:scale( 1.5);}
100% {opacity: 0.3;transform:scale( 2);}
}
@keyframes myfirst2{
0% {opacity: 0.2;transform:scale(1.75);}
50% {opacity: 0.1;transform:scale(1.9);}
100% {opacity: 0;transform:scale(2.15);}
}
这样的话，微信开发者工具模拟器和真机调试的效果就一样 了
效果图
