前言
众所周知，彩虹的颜色顺序从外到内的顺序；红色、橙色、黄色、绿色、蓝色、靛蓝色和紫色。而我们今天要实现的效果，就是通过纯CSS实现这样一个七色彩虹，具体效果可以参考下面的码上掘金。
效果预览
看了效果展示后，接下来我们来一步步实现它。
HTML
首先是HTML部分，毕竟是七色彩虹嘛，所以准备好七个div元素，分别代表七种颜色。
<figure class="rainbow">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
这里定义了一个名为rainbow的figure元素，并包含了7个空的div元素作为其子元素。如果想要实现七彩效果，还需要添加相应的CSS样式或来定义每个div元素的颜色和动画效果。下面我们就来介绍一下相关的CSS样式。
CSS
这里是CSS样式部分，首先是rainbow元素，相关代码如下。
.rainbow {
width: 20em;
height: 10em;
position: relative;
display: flex;
justify-content: center;
align-items: center;
animation: move 4s linear infinite alternate;
}
@keyframes move {
50% {
transform: translateY(5em);
}
}
在rainbow元素上应用名为move的动画效果。这个动画效果在4秒内以线性速度无限循环交替发生。
在 50% 的进度时，容器会向上移动 5em，通过transform属性的translateY函数来实现垂直方向的平移。
.rainbow div {
box-sizing: border-box;
background-color: currentColor;
filter: opacity(0.6);
position: absolute;
width: calc(100% - 2em * (var(--n) - 1));
height: calc(200% - 2em * (var(--n) - 1));
border-radius: 10%;
animation: change 2s linear infinite;
animation-delay: calc(0.1s * var(--n));
}
@keyframes change {
50%,
100% {
border-radius: 50%;
background-color: transparent;
border: 1em solid;
border-color: transparent currentColor currentColor transparent;
transform: rotate(225deg);
filter: opacity(1);
}
}
这里我们定义了一个名为change的关键帧动画。在这个关键帧动画中，有两个关键帧，即 50% 和 100%。这意味着在动画的一半和结束时，将应用下面的样式。在 50% 和 100% 的时间点，元素的边框半径变为50%，背景颜色变为透明，边框变为1em宽的实线，边框颜色由透明变为当前颜色，当前颜色再变为透明。同时，元素的旋转角度变为225度，透明度变为1。
通过这些属性的变化，元素在动画过程中会从一个正常的矩形形状变为一个倾斜的圆形，并且边框颜色会从透明渐变为当前颜色。
.rainbow div:nth-child(1) {
--n: 1;
color: orangered;
}
.rainbow div:nth-child(2) {
--n: 2;
color: orange;
}
.rainbow div:nth-child(3) {
--n: 3;
color: yellow;
}
.rainbow div:nth-child(4) {
--n: 4;
color: mediumspringgreen;
}
.rainbow div:nth-child(5) {
--n: 5;
color: deepskyblue;
}
.rainbow div:nth-child(6) {
--n: 6;
color: #065279;
}
.rainbow div:nth-child(7) {
--n: 7;
color: mediumpurple;
}
最后就是为每个div元素赋予颜色值了。每个子元素的颜色和索引值通过CSS变量进行定义。:nth-child(n)选择器用于选择第n个子元素，而--n是一个自定义的CSS变量，用于存储索引值。
具体来说，第一个子元素 (div:nth-child(1)) 的颜色为orangered，索引值为1；第二个子元素 (div:nth-child(2)) 的颜色为orange，索引值为2；依此类推，直到第七个子元素 (div:nth-child(7)) 的颜色为 mediumpurple，索引值为7。
总体而言，这里用于实现一个彩虹色效果，每个子元素都有不同的颜色。
总结
以上就是七色彩虹效果的实现过程了，代码比较简单，通俗易懂，纯靠CSS实现。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
