CSS 高级动画

3d正方体和波纹效果

<div class='bowen-box'>
		<div class="water-wrapper">
			<div class='water1'></div>
			<div class='water2'></div>
			<div class='water3'></div>
			<div class='water4'></div>
			<div class='water5'></div>
			<div class='fangkuai'></div>
		</div>
	</div>
   <div class="big">
     <div class="fir"  style="background:red;"></div>
     <div class="sec"  style="background:blue;"></div>
     <div class="thi"  style="background:orange;"></div>
     <div class="fou"  style="background:grey;"></div>
     <div class="fif"  style="background:yellow;"></div>
     <div class="six"  style="background:purple;"></div>
  </div> 

.big{
	perspective: 100000px;
	position: relative;
	top: 200/75rem;
	left:100/75rem;
	transform-style: preserve-3d;
	animation: name 8s linear infinite;
	width:500/75rem;
	height:500/75rem;
	.fir,.sec,.thi,.fou,.fif,.six{
		width:500/75rem;
	    height:500/75rem;
	    position:absolute;
	}
	.fir{
		transform: translateX(-250/75rem) rotateY(-90deg);
	}
	.sec{
		transform: translateZ(250/75rem);
	}
	.thi{
		transform: translateX(250/75rem) rotateY(90deg);
	}
	.fou{
		transform: translateZ(-250/75rem);
	}
	.fif{
		transform: translateY(250/75rem) rotateX(90deg);
	}
	.six{
		transform: translateY(-250/75rem) rotateX(90deg);
	}
}
.bowen-box{
		width:100%;
		height:700/75rem;
		display:flex;
		justify-content:center;
		align-items:center;
		margin-top:50/75rem;
		.water-wrapper{
			position:relative;
		}
		.water1 {
                -webkit-animation: wateranimate 4s 3s ease-out infinite;
                animation: wateranimate 4s 3s ease-out infinite;
            }           
            .water2 {
                -webkit-animation: wateranimate 4s 2s ease-out infinite;
                animation: wateranimate 4s 2s ease-out infinite;
            }           
            .water3 {
                -webkit-animation: wateranimate 4s 1s ease-out infinite;
                animation: wateranimate 4s 1s ease-out infinite;
            }           
            .water4 {
                -webkit-animation: wateranimate 4s 0s ease-out infinite;
                animation: wateranimate 4s 0s ease-out infinite;
            } .water1, .water2, .water3, .water4 {
            	position:absolute;
                padding:1rem;
                box-shadow: 0 0 120/75rem 30/75rem rgb(19, 108, 182) inset;
                border-radius: 100%;
                z-index: 1;
                opacity: 0;
            }
            .water5{
                display:flex;
                padding:1rem;
                background:rgb(19, 108, 182);
                border-radius: 100%;
                z-index: 1;
                opacity: 1;
                transform:scale(1.5);
            }
            .fangkuai{
            	background-color: #fff;
                height:98/75rem;
                width:56/75rem;
                border-radius:28/75rem;
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
                opacity: 1;
                z-index:1;
            }       
	}
@keyframes name{
	0%{
		transform: rotateX(0deg) rotateY(0deg)
	}
    33%{
	transform: rotateY(120deg) rotateX(120deg)
	}
	66%{
		transform: rotateY(240deg) rotateX(240deg)
	}
	100%{
		transform: rotateY(360deg) rotateX(360deg)
	}
}
@keyframes wateranimate {
                0% {
                    transform: scale(1.5);
                    opacity: 0.5;
                }
                100% {
                    transform: scale(4.5);
                    opacity: 0;
                }
            }