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

This article mainly shows you "how to use pure CSS to achieve abstract water ripple animation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure CSS to achieve abstract water ripple animation" this article.

Code interpretation

Define dom. The container contains 9 elements:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the container size:

.container {

Width:30em

Height:30em

Font-size:10px

}

Use the grid layout to arrange the nine child elements into a 3x3 grid:

.container {

Display:grid

Grid-template-columns:repeat (3Jing 1fr)

}

The style of child elements in the container is set by pseudo elements:

.containerspan {

Position:relative

}

.containerspan:: before

.containerspan:: after

{

Content:''

Position:absolute

Box-sizing:border-box

Border-style:nonesolidsolidnone

Border-width:1em

Border-color:gold

Width:100%

Height:100%

}

Rotate the container so that its tip is facing up:

.container {

Transform:rotate (- 135deg)

}

Add animations in which the size of the child elements changes from small to large:

.containerspan:: before

.containerspan:: after

{

Animation:

Animate-scale1.6slinearinfinite

}

@ keyframesanimate-scale {

From {

Width:1%

Height:1%

}

To {

Width:100%

Height:100%

}

}

Add the animation of the border color change of the child elements:

.containerspan:: before

.containerspan:: after

{

Animation:

Animate-border-color1.6slinearinfinite

Animate-scale1.6slinearinfinite

}

@ keyframesanimate-border-color {

0% 25% {

Border-color:tomato

}

50% 75% {

Border-color:gold

}

100% {

Border-color:black

}

}

Add animation with changes in the border width of the child elements:

.containerspan:: before

.containerspan:: after

{

Animation:

Animate-border-width2.6slinearinfinite

Animate-border-color1.6slinearinfinite

Animate-scale1.6slinearinfinite

}

Finally, let:: after the animation time of pseudo elements slow by half a beat:

.containerspan:: after {

Animation-delay:-0.8s

}

@ keyframesanimate-border-width {

0% 100% {

Border-width:0.1em

}

25% {

Border-width:1.5em

}

}

The above is all the content of this article, "how to use pure CSS to achieve abstract animation of rippling waves". 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.