原文地址：https://segmentfault.com/a/1190000014807564
感想： 这个特效不难，但是这想法可能想不到，哈哈，怎么又废了。
HTML代码：
<div class="loader"> ???<span></span> ???<span></span> ???<span></span> ???<span></span> ???<span></span></div>
CSS代码：
html, body ,.loader{ ???margin: 0; ???padding: 0; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: black;}/* 设置span的样式 */.loader{ ???position: relative; ???width: 10em; ???height: 10em; ???font-size: 28px;}.loader span{ ???position: absolute; ???width: 100%; ???height: 100%; ???/* 0.3表示透明度 */ ???background-color: rgba(100%, 0%, 0%, 0.3); ???/* 并排 */ ???box-sizing: border-box; ???border: 0.5em solid; ???/* border-color: 上下 ?左右 */ ???border-color: white rgba(100%, 100%, 100%, 0.2); ???/* 动画名称 周期 节奏 循环次数 是否反向播放 */ ???animation: animate 5s ease-in-out infinite alternate;}@keyframes animate{ ???0%{ ???????/* red */ ???????/* 颜色变换 */ ???????background-color: rgba(100%, 0%, 0%, 0.3); ???????/* 旋转 */ ???????transform: rotate(0deg); ???} ???25% { ???????/* yellow */ ???????background-color: rgba(100%, 100%, 0%, 0.3); ???} ???50% { ???????/* green */ ???????background-color: rgba(0%, 100%, 0%, 0.3); ???} ???75% { ???????/* blue */ ???????background-color: rgba(0%, 0%, 100%, 0.3); ???} ???100% { ???????/* purple */ ???????background-color: rgba(100%, 0%, 100%, 0.3); ???????transform: rotate(720deg); ???}}/* 分别设置5个span的尺寸 */.loader span:nth-child(1){ ???width: calc(20% + 20% * (5-1)); ???height: calc(20% + 20% * (5-1)); ???/* 为每个span设置动画延时 */ ???animation-delay: calc(0.2s * (5-1));}.loader span:nth-child(2) { ???width: calc(20% + 20% * (5 - 2)); ???height: calc(20% + 20% * (5 - 2)); ???animation-delay: calc(0.2s * (5 - 2));}.loader span:nth-child(3) { ???width: calc(20% + 20% * (5 - 3)); ???height: calc(20% + 20% * (5 - 3)); ???animation-delay: calc(0.2s * (5 - 3));}.loader span:nth-child(4) { ???width: calc(20% + 20% * (5 - 4)); ???height: calc(20% + 20% * (5 - 4)); ???animation-delay: calc(0.2s * (5 - 4));}.loader span:nth-child(5) { ???width: calc(20% + 20% * (5 - 5)); ???height: calc(20% + 20% * (5 - 5)); ???animation-delay: calc(0.2s * (5 - 5));}17.纯 CSS 创作炫酷的同心矩形旋转动画
原文地址：https://www.cnblogs.com/FlyingLiao/p/10243587.html