How to use pure CSS to animate Baolo Mints (source code attached)

The content of this article is about how to use pure CSS to realize the animation of Baolu Mint Candy (with source code). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

Source code download

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

Code Interpretation

Define dom, only 1 element:

<div></div>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: silver;
}

Define container size:

.spinner {
    width: 50vmin;
    height: 50vmin;
    position: relative;
}

Use before pseudo-element to draw a black ring like Paolo mint candy:

.spinner::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    border: 12.5vmin solid;
    border-radius: 50%;
}

Next, create the animation effect.
Set the perspective depth of field:

body {
    perspective: 400px;
}

Let the ring move on the z-axis:

.spinner::before {
    animation: spin 1.5s ease-in-out infinite both reverse;
}

@keyframes spin {
    0%, 100% {
        transform: translateZ(10vmin);
    }

    60% {
        transform: translateZ(-10vmin);
    }
}

Let the ring tilt slightly when the z-axis distance is large:

@keyframes spin {
    0%, 100% {
        transform: translateZ(10vmin) rotateX(25deg);
    }

    60% {
        transform: translateZ(-10vmin);
    }
}

Add a scaling effect:

@keyframes spin {
    0%, 100% {
        transform: translateZ(10vmin) rotateX(25deg);
    }

    33% {
        transform: translateZ(-10vmin) scale(0.4);
    }

    60% {
        transform: translateZ(-10vmin);
    }
}

Use the after pseudo element to draw a white ring, and delay its animation by half of the total animation length:

.spinner::before,
.spinner::after {
    /*略*/
    animation: spin 1.5s ease-in-out infinite both reverse;
}

.spinner::after {
    border-color: white;
    animation-delay: -0.75s;
}

Continue Next, create the animation effect of the container. In order not to be affected by the animation of the sub-element, first temporarily block the animation effect of the pseudo-element.

.spinner::before,
.spinner::after {
    /* animation: spin 1.5s ease-in-out infinite both reverse; */
}

Increase the animation effect of the container rotating along the x-axis. The animation time is twice the animation time of the child element:

.spinner {
    animation: wobble 3s ease-in-out infinite;
}

@keyframes wobble {
    0%, 100% {
        transform: rotateX(15deg);
    }
    
    50% {
        transform: rotateX(60deg);
    }
}

Increase the animation effect of the container rotating along the y-axis:

@keyframes wobble {
    0%, 100% {
        transform: rotateX(15deg) rotateY(60deg);
    }
    
    50% {
        transform: rotateX(60deg) rotateY(-60deg);
    }
}

Increase the animation effect of the overall rotation of the container:

@keyframes wobble {
    0%, 100% {
        transform: rotateX(15deg) rotateY(60deg);
    }
    
    50% {
        transform: rotateX(60deg) rotateY(-60deg) rotate(180deg);
    }
}

Turn on the animation effect of the child element, so that the animation effect of the child element and the animation effect of the container are superimposed:

.spinner::before,
.spinner::after {
    animation: spin 1.5s ease-in-out infinite both reverse;
}

Finally, make the child element in Movement in 3d space:

.spinner {
    transform-style: preserve-3d;
}

Done!

The above is the detailed content of How to use pure CSS to animate Baolo Mints (source code attached). For more information, please follow other related articles on the PHP Chinese website!