Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS code to achieve the animation effect of popsicles, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Code interpretation

Define dom. The container contains 2 elements:

Centered 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:8em8em1em1em

}

To color a popsicle:

.flavors {

Position:relative

Overflow:hidden

}

.flavors:: before {

Content:''

Position:absolute

Width:140%

Height:120%

Background:linear-gradient (

Hotpink0%

Hotpink25%

Deepskyblue25%

Deepskyblue50%

Gold50%

Gold75%

Lightgreen75%

Lightgreen100%)

Z-index:-1

Left:-20%

Transform:rotate (- 25deg)

}

Have a little lighting effect:

.flavors:: after {

Content:''

Position:absolute

Width:2em

Height:17em

Background-color:rgba (255pr. 255pr. 05)

Left:2em

Bottom:2em

Border-radius:1em

}

Draw popsicles and chopsticks:

.stick {

Position:relative

Width:6em

Height:8em

Background-color:sandybrown

Left:calc (50%-6em/2)

Border-radius:003em3em

}

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

.stick:: after {

Content:''

Position:absolute

Width:inherit

Height:2.5em

Background-color:sienna

}

Let the color of the popsicle roll:

.flavors:: before {

Animation:moving100slinearinfinite

}

@ keyframesmoving {

To {

Background-position:01000vh

}

}

Finally, increase the interaction so that the animation is played when the mouse hovers:

.flavors:: before {

Animation-play-state:paused

}

. ice-lolly:hover.flavors::before {

Animation-play-state:running

}

The above is all the content of this article "how to use pure CSS code to achieve the animation effect of popsicles". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.