The caterpillar

Analysis of the

  1. A caterpillar is made up of circles from the inside out.
  2. The innermost circle is the closest to the center, and the outermost circle is the farthest.
  3. The rotation rate of the circle is the same, but the time (or position) to start the rotation is different.

When the initial

And then, from left to right, it starts to rotate around the center

Code – Take two circles as an example

<div>
    <div class="rect">
        <! -- The first circle -->
        <div class="circle"></div>
    </div>
    <div class="rect">
        <! -- The second circle -->
        <div class="circle"></div>
    </div>
</div>
Copy the code
@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(1turn); }}.rect {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.circle {
    /* The default circle style */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px 5px rgba(0.0.0.0.1);
}
/* Adjust the start time and initial position of the first circle rotation */
.rect:nth-child(1) {
    /* Rotation delay 0 */
    animation: rotate 3s 0s linear infinite;
}
.rect:nth-child(1) .circle {
    /* Offset from the center of the circle 10px */
    transform: translateX(10px);
    background-image: linear-gradient(43deg.#4158D0 0%.#C850C0 46%.#FFCC70 100%);
}

/* Adjust the start time and initial position of the second circle rotation */
.rect:nth-child(2) {
    /* Rotation delay 250ms */
    animation: rotate 3s 250ms linear infinite;
}
.rect:nth-child(2) .circle {
    /* Offset the center by 20px */
    transform: translateX(20px);
    background-image: linear-gradient(160deg.#0093E9 0%.#80D0C7 100%);
}
Copy the code

Two circles

Then just follow the above rules to add a circle (the more the circle offset, the later the animation start time), you can achieve the caterpillar effect.

The complete code

Jsbin.com/xanalug/edi…