Effect preview

Online demo

Press the "click preview" button on the right to preview on the current page, and click the link to preview in full screen.

https://codepen.io/comehope/pen/vjvoow

Interactive video tutorial

This video is interactive. You can pause the video at any time and edit the code in the video.

Please use chrome, safari, edge to open and watch.

https://scrimba.com/p/pEgDAM/cPLGLhV

Source code download

Please download all the source code of the daily front-end combat series from github:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

Define dom:

<div class="rainbow">
    <div class="bows">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Center:

html, body, .bows {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

Define the size of the rainbow:

.rainbow {
    width: 20em;
    height: 10em;
}

Define the size of the arch in the rainbow:

.bows {
    width: 100%;
    height: 200%;
    position: relative;
}

Define the properties common to all arches in the rainbow:

.bows {
    transform: rotate(225deg);
}

.bows span {
    position: absolute;
    width: calc(100% - 2em * (var(--n) - 1));
    height: calc(100% - 2em * (var(--n) - 1));
    border: 1em solid var(--color);
    box-sizing: border-box;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
}

Set the personality variables for each arch separately:

.bows span:nth-child(1) {
    --n: 1;
    --color: orangered;
}

.bows span:nth-child(2) {
    --n: 2;
    --color: orange;
}

.bows span:nth-child(3) {
  --n: 3;
  --color: yellow;
}

.bows span:nth-child(4) {
  --n: 4;
  --color: mediumspringgreen;
}

.bows span:nth-child(5) {
  --n: 5;
  --color: deepskyblue;
}

.bows span:nth-child(6) {
  --n: 6;
  --color: mediumpurple;
}

Define animation effects:

.bows span {
    animation: rotating 3s infinite;
    animation-delay: calc(0.05s * var(--n));
}

@keyframes rotating {
    0%, 20% {
        transform: rotate(0deg);
    }

    80%, 100% {
        transform: rotate(360deg);
    }
}

Finally, hide content outside the container:

.rainbow {
    overflow: hidden;
}

be accomplished!

Original address: https://segmentfault.com/a/119000014939781