简单的水波加载 css3特效 可逆的水波

这水波是可逆的水波特效  我设置了按钮触发（没有暂停效果 可自行修改喔）

过程效果：

话不多说  直接上代码 对您有帮助点赞收藏吧

div class="quan">
			<div class="shui"></div>
		</div>
		<button id="a">加载</button>

			.quan{
				position: relative;
				width: 180px;
				height: 180px;
				top: 200px;
				left: 30%;
				border-radius: 50%;
				boder:3px solid rgb(246,247,248);
				box-shadow: 0 0 0 3px rgb(41,134,196);
			}
			.shui{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgb(23,106,201);
				border-radius: 50%;
				overflow: hidden;
			}
			
			.shui::after{
				content: '';
				position: absolute;
				top: 50%;
				left:50%;
				width: 150%;
				height: 150%;
				border-radius: 40%;
				background-color: rgb(240,228,228);
				transform: translate(-50%,-65%);
				animation: shi 5s linear infinite;
			}
			@keyframes shi{
				0%{
					transform: translate(-50%,-65%) rotate(0deg);
				}
				100%{
					transform:translate(-50%,-65%) rotate(360deg);
				}
			}

var btn=document.getElementById("a")
		var a=1
		btn.addEventListener('click',function(envent){
			if(a===1){
				a=0
				document.styleSheets[0].addRule('.shui::after','top: -60%;transition:top 15s;'); 
			}else{
				a=1
				document.styleSheets[0].addRule('.shui::after','top:50%;transition:top 15s;'); 
			}
			console.log(1)
		},false)