原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效
扩展后地址:https://scrimba.com/c/cNJVWUR
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;}