CSS3 @keyframes规则创建水波纹动画

初步了解@keyframes动画，写一个简单的效果图

html代码

<div class='loader-container'>
	<div class='wave-loader'>
		<div class='wave wave1'></div>		
		<div class='wave wave2'></div>
	</div>
</div>

.loader-container 固定定位的全屏容器，用于覆盖整个页面，z-index: 9999确保层级最高。

.wave-loader 水球波纹容器，圆形设计（ border-radius: 50% ），包含两个 .wave 元素：双层波纹。

css3波浪效果

.wave-loader
	{
		position:relative;
		width: 200px;
		height:200px;
		border-radius:50%:
		background:rgba(255，255，255，0.1);
		overflow: hidden;
		box-shadow:0 0 0 10px rgba(255，255，255，0.05)，
		 0 0 20px rgba(108，92，231，0.3);
	}
.wave 
	{
		background-color: hsla(196, 100%, 53%, .95);
		position: absolute;
		width: 200%;
		height: 200%;
		top:50%;
		left:-50%;
		transform-origin:50% 50%;
		animation: wave 6s linear infinite;
	}
.wave1 {
		background-color: hsla(196, 100%, 53%, .94);
		border-radius:45%;
		animation-duration:6s infinite;
	}
.wave2 {
		background-color: hsla(196, 100%, 53%, .93);
		border-radius:40%;
		animation-duration:8s infinite;
		top:60%;
	}
@keyframes wave
{
	0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}