css3动画效果 呼啦圈实例

css:
html,
body {
background: #111;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.wrapper {
position: absolute;
width: 50vw;
height: 50vw;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.grid {
border-radius: 100%;
position: absolute;
width: 50vw;
height: 50vw;
background-size: 20px 20px;
mix-blend-mode: screen;
}
.grid:nth-child(1) {
animation: rotate linear infinite;
background-image: linear-gradient(#f00 1px, transparent 1px);
animation-duration: 10s;
animation-delay: 0s;
border:solid 1px #fff;
transform: rotateX(50deg) rotateY(145deg);
}
.grid:nth-child(2){
animation: r1 linear infinite;
background-image: linear-gradient(#f00 1px, transparent 1px);
animation-duration: 3s;
animation-delay: 0s;
border:solid 1px #fff;
width: 40vw;
margin:5vw ;
height: 40vw;
transform: rotateX(50deg) rotateY(145deg) rotateZ(0deg) translateZ(-2vw);
}
@keyframes rotate {
to {
transform: rotateX(50deg) rotateY(145deg) rotateZ(360deg);
}
}
@keyframes r1 {
to {
transform: rotateX(50deg) rotateY(145deg) rotateZ(360deg) translateZ(-2vw);
}
}

htMl:
<div class="wrapper">
<div class="grid"></div>
<div class="grid"></div>
</div>