How to use CSS to realize the animation effect of roller coaster loader

The content of this article is about how to use CSS to realize the animation effect of the roller coaster loader. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

Code interpretation

Definition of dom, container Contains 3 elements, representing 3 dots:

<p>
    <span></span>
    <span></span>
    <span></span>
</p>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, silver, teal);
}

Defines the diameter of the Ferris wheel, and other lengths use this value as the basic scale:

.loader {
    --diameter: 10em;
}

Define the container size, the width is 2 times the height:

.loader {
    --width: calc(var(--diameter) * 2);
    width: var(--width);
    height: var(--diameter);
}

Define the shared attributes of the pseudo-element:

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    bottom: 0;
}

Draw the bottom track and define a variable representing the line thickness:

.loader {
    --stroke-width: calc(var(--diameter) / 40);
    color: white;
}

.loader::before {
    width: inherit;
    height: var(--stroke-width);
    background-color: currentColor;
}

Draw the circular orbit in the middle:

.loader::after {
    box-sizing: border-box;
    width: var(--diameter);
    height: var(--diameter);
    border: var(--stroke-width) solid;
    border-radius: 50%;
    left: 25%;
}

Draw a dot and define a variable representing the diameter of the dot:

.loader {
    --dot-diameter: calc(var(--diameter) / 10);
}

.loader span {
    position: absolute;
    width: var(--dot-diameter);
    height: var(--dot-diameter);
    background-color: currentColor;
    border-radius: 50%;
    bottom: var(--stroke-width);
    left: calc((var(--width) - var(--dot-diameter)) / 2);
}

Add for the dot Animation effect of rotating along a circular orbit:

.loader span {
    animation:
        rotating 2s linear infinite;
    --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
    transform-origin: 50% var(--vertical-center);
}

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

    60%, 100% {
        transform: rotate(-1turn);
    }
}

Add moving animation effect to the dots:

.loader span {
    animation:
        run 2s linear infinite,
        rotating 2s linear infinite;
}

@keyframes run {
    0% {
        left: calc(var(--dot-diameter) * -1);
    }

    10%, 60% {
        left: calc((var(--width) - var(--dot-diameter)) / 2);
    }

    70%, 100% {
        left: calc(var(--width));
    }
}

Set animation delay for the other 2 dots to make the 3 dots look like Like 3 carriages next to each other:

.loader span:nth-child(1) {
    animation-delay: 0.075s;
}

.loader span:nth-child(2) {
    animation-delay: 0.15s;
}

Finally, hide the content outside the container:

.loader {
    overflow: hidden;
}

Recommended related articles:

css to implement navigation switching Code example

How to use pure CSS to achieve the effect of a green pig

css3 to achieve the effect of a moving menu button

The above is the detailed content of How to use CSS to realize the animation effect of roller coaster loader. For more information, please follow other related articles on the PHP Chinese website!