原文地址：2.纯 CSS 创作一个矩形旋转 loader 特效
扩展后地址：https://scrimba.com/c/cNJVWUR
HTML代码：
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
CSS代码：
/* 居中显示 */
html, body {
margin:;
padding:;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
/* 设置容器的尺寸： */
.loader {
width: 150px;
height: 150px;
position: relative;
}
/* 设置矩形的边框样式 */
.loader span {
position: absolute;
box-sizing: border-box; border-radius: 50%; }
/* 设置 3 个矩形的尺寸： */
.loader span:nth-child(1) {
border: 5px solid red;
width: 100%;
height: 100%;
}
.loader span:nth-child(2) {
border: 5px solid green;
width: 70%;
height: 70%;
margin: 15%;
}
.loader span:nth-child(3) {
border: 5px solid blue;
width: 40%;
height: 40%;
margin: 30%;
}
/* 定义动画效果：*/
@keyframes rotating1 {
from {
transform: rotateY(0deg);
} to {
transform: rotateY(360deg);
}
}
/* 把动画应用到 3 个矩形上：*/
.loader span:nth-child(1) {
animation: rotating1 linear infinite;
animation-duration: 4s;
}
/* 定义动画效果：*/
@keyframes rotating2 {
from {
transform: rotateX(0deg);
transform-origin:center center;
} to {
transform: rotateX(360deg);
}
}
/* 把动画应用到 3 个矩形上：*/
.loader span:nth-child(2) {
animation: rotating2 linear infinite;
animation-duration: 4s;
}
/* 定义动画效果：这里无效 需补充*/
@keyframes rotating3 {
from {
skew(0deg,0deg);
}
to {
skew(360deg,360deg);
}
}
/* 把动画应用到 3 个矩形上：*/
.loader span:nth-child(3) {
animation: rotating3 linear infinite;
animation-duration: 4s;
}