How to use css to realize the dynamic effect of waves
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!
