How to use pure CSS to achieve the animation of Popsicles (code attached)

This article gives you the content is about how to use pure CSS to implement the ice-lolly animation effect (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

To define the DOM, the container contains 2 elements:

<div class= "ice-lolly" >    <div class= "Flavors" ></div>    <div class= "Stick" ></div ></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:darkslategray;}

Draw the shape of a popsicle:

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

To color 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);}

For a little light 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 shade to the popsicle chopsticks and add three-dimensional sense:

. stick::after {    content: ';    Position:absolute;    Width:inherit;    height:2.5em;    Background-color:sienna;}

Let the color of popsicles roll up:

. flavors::before {    animation:moving 100s linear Infinite;} @keyframes Moving {to    {        background-position:0 1000vh;    }}

Finally, increase the interaction effect and play the animation when the mouse hovers over it:

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

Done!