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

This article mainly shows you "how to use pure CSS code to achieve an hourglass animation effect", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure CSS code to achieve an hourglass animation effect" this article.

Code interpretation

Define dom. The container contains two elements, representing the upper and lower half of the hourglass, respectively:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:gainsboro

}

Define the container size and set the overall layout of the child elements:

.loader {

Width:4.3em

Height:9.8em

Font-size:10px

Position:relative

Display:flex

Flex-direction:column

Align-items:center

Justify-content:space-between

}

Draw 2 squares:

.top

.bottom {

Width:3.5em

Height:3.5em

Border-style:solid

Border-color:saddlebrown

}

Change the two squares into an hourglass shape through borders, fillets, and rotation:

.top

.bottom {

Border-width:0.2em0.2em0.6em0.6em

Border-radius:500%50%30%

}

.top {

Transform:rotate (- 45deg)

}

.bottom {

Transform:rotate (135deg)

}

Draw the sand with pseudo elements, the top of the upper sand is a large arc, and the top of the lower sand is a small arc:

.top:: before

.bottom:: before {

Content:''

Position:absolute

Width:inherit

Height:inherit

Background-color:deepskyblue

}

.top:: before {

Border-radius:0100

}

.bottom:: before {

Border-radius:00035%

}

Define the animation properties of the sand:

.top:: before

.bottom:: before {

Animation:2slinearinfinite

}

Add animation of sand from the top half of the hourglass tribe:

.top:: before {

Animation-name:drop-sand

}

@ keyframesdrop-sand {

To {

Transform:translate (- 2.5em2.5em)

}

}

Increase the animation of sand's hourglass accumulation in the lower half:

.bottom:: before {

Transform:translate (2.5emmine 2.5em)

Animation-name:fill-sand

}

@ keyframesfill-sand {

To {

Transform:translate (0Pol 0)

}

}

Hide the upper part of the hourglass and the part outside the lower half of the container. The superposition effect of the above two animations is that the sand leaks from the upper half and slowly accumulates in the lower half:

.top

.bottom {

Overflow:hidden

}

Use the pseudo elements of the outer container to make a narrow strip to simulate the flow of sand:

.loader:: after {

Content:''

Position:absolute

Width:0.2em

Height:4.8em

Background-color:deepskyblue

Top:1em

}

Increase the animation of sand flow:

.loader:: after {

Animation:flow2slinearinfinite

}

@ keyframesflow {

10% par 100% {

Transform:translateY (3.2em)

}

}

Finally, add the flipping animation of the hourglass:

.loader {

Animation:rotating2slinearinfinite

}

@ keyframesrotating {

0% 90% {

Transform:rotate (0)

}

100% {

Transform:rotate (0.5turn)

}

}

The above is all the content of this article "how to use pure CSS code to achieve the animation effect of an hourglass". 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.