话不多说,上代码
wxml
<view class="background_view">
<view class='wave'></view>
<view class='wave_1'></view>
<view class='wave_2'></view>
</view>
wxss
.wave{
position: absolute;
top: 60%;
width: 200rpx;
height: 200rpx;
background-color: rgb(60, 108, 250);
border-radius: 50%;
}
.wave:before,.wave:after{
content: "";
position: absolute;
width: 800rpx;
height: 800rpx;
top: 320%;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
}
.wave:after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .7);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
.wave_1{
position: absolute;
top: 180%;
left: 45%;
width: 10rpx;
height: 10rpx;
background-color: rgb(60, 108, 250);
border-radius: 50%;
}
.wave_1:before,.wave_1:after{
content: "";
position: absolute;
width: 600rpx;
height: 600rpx;
top: 320%;
left: 50%;
background-color: rgba(255, 255, 255, .2);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 4s linear infinite;
}
.wave_1:after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .8);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear -5s infinite;
}
.wave_2{
position: absolute;
top: 177%;
left: 80%;
width: 10rpx;
height: 10rpx;
background-color: rgb(60, 108, 250);
border-radius: 50%;
}
.wave_2:before,.wave_2:after{
content: "";
position: absolute;
width: 600rpx;
height: 600rpx;
top: 320%;
left: 50%;
background-color: rgba(255, 255, 255, .3);
border-radius: 43%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 8s linear infinite;
}
.wave_2:after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .8);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 20s linear -5s infinite;
}
tip:三个波浪的旋转速度不一致,这样会更像波浪。