原文地址：2.纯 CSS 创作一个矩形旋转 loader 特效
扩展后地址：https://scrimba.com/c/cNJVWUR
扩展地址：https://codepen.io/pen/
HTML代码：
<div class="loader"> ?????<span></span> ?????<span></span> ?????<span></span> </div>
CSS代码：
/* 居中显示 */html, body { ???margin: 0; ???padding: 0; ???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;}前端每日实战：2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10088015.html