微信小程序实现波浪效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_19671783/article/details/87778316

话不多说，上代码

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：三个波浪的旋转速度不一致，这样会更像波浪。