How to use pure CSS to achieve the animation effect of popsicles (with code)

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

Effect preview

Source code download

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

Code Interpretation

Define dom, the container contains 2 elements:

<div>
    <div></div>
    <div></div>
</div>

Centered display:

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

Draw the shape of the popsicle:

.flavors {
    width: 19em;
    height: 26em;
    font-size: 10px;
    border-radius: 8em 8em 1em 1em;
}

Color the popsicles:

.flavors {
    position: relative;
    overflow: hidden;
}

.flavors::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 120%;
    background: linear-gradient(
        hotpink 0%,
        hotpink 25%,
        deepskyblue 25%,
        deepskyblue 50%,
        gold 50%,
        gold 75%,
        lightgreen 75%,
        lightgreen 100%);
    z-index: -1;
    left: -20%;
    transform: rotate(-25deg);
}

Add a little lighting effect:

.flavors::after {
    content: '';
    position: absolute;
    width: 2em;
    height: 17em;
    background-color: rgba(255, 255, 255, 0.5);
    left: 2em;
    bottom: 2em;
    border-radius: 1em;
}

Draw the popsicle chopsticks:

.stick {
    position: relative;
    width: 6em;
    height: 8em;
    background-color: sandybrown;
    left: calc(50% - 6em / 2);
    border-radius: 0 0 3em 3em;
}

Add a little shadow to the popsicle chopsticks to increase the three-dimensionality:

.stick::after {
    content: '';
    position: absolute;
    width: inherit;
    height: 2.5em;
    background-color: sienna;
}

Let the colors of the popsicles roll:

.flavors::before {
    animation: moving 100s linear infinite;
}

@keyframes moving {
    to {
        background-position: 0 1000vh;
    }
}

Finally, add the interactive effect, and the animation will only play when the mouse is hovering:

.flavors::before {
    animation-play-state: paused;
}

.ice-lolly:hover .flavors::before {
    animation-play-state: running;
}

You're done!

Related recommendations:

How to use pure CSS to achieve the animation effect of a three-dimensional button with metallic luster (source code attached)

How to Use pure CSS to achieve the animation effect of text disconnection (source code attached)

How to use CSS to achieve the effect of gradient animated borders (code attached)

The above is the detailed content of How to use pure CSS to achieve the animation effect of popsicles (with code). For more information, please follow other related articles on the PHP Chinese website!