原文地址：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));}