微信小程序实现波浪效果

话不多说，上代码

wxml

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