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

This article mainly introduces how to use css to achieve wave dynamic effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Code

Html

Scss

/ / A simple box

.wave {

Position: relative

Width: 150px

Height: 150px

Background-color: # 5291e0

Overflow: hidden

/ / two irregular circles (positioned relative to the box and wave height from the bottom)

&:: before

&:: after {

Content: ""

Position: absolute

Left: 50%

Bottom: 15%

Width: 500%

Height: 500%

Border-radius: 45%

Background-color: # fff

Transform: translateX (- 50%); / / centered

Animation: rotate 15s linear infinite

}

/ / one of the irregular circles adjusts the style to distinguish (or adjust the parameters of animation to distinguish)

&:: before {

Bottom: 10%

Opacity:. 5

Border-radius: 47%

}

}

}

/ / rotation animation

@ keyframes rotate {

From {

Transform: translateX (- 50%) rotateZ (0deg)

}

To {

Transform: translateX (- 50%) rotateZ (360deg)

}

}

Thank you for reading this article carefully. I hope the article "how to use css to achieve the dynamic effect of waves" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.