CSS3 simple wave simulation-I am a wave, I have ups and downs, there are big waves and Wavelet (in a giggle ...),

CSS3 simple wave simulation-I am a wave, I have ups and downs, there are big waves and Wavelet (in a giggle ...),
I'm a wave, I have ups and downs, I have big waves and Wavelet (giggle ...)

Recently revised websites do not usually write animations, but some websites still need them. Therefore, it is very easy to share a simple animation.

 

Principles

In fact, it is very easy to use a 24 00px width prepared by the artist three different fluctuating waves, and then merged into a [genie picture] (to help accelerate loading and loading together)

With the materials, you can use a container to pile up the waves of the three div backgrounds, and then use the css3 offset to move them. Of course, both the left and right sides and the upper and lower sides must be used, then slowly adjust to a suitable time and latency.

 

Not much nonsense, first on the demo address: http://sandbox.runjs.cn/show/akodn0vt

 

Wave animation CSS

<Style type = "text/css">/** author: jasnature * email: 276227015@qq.com * last update: 2016-04-21 **/. index_waves {background: url ("img/index_waves.png place a wave chart here. The figure shows the address shown in") center 0 no-repeat ;}. wave3 {height: 427px; width: 2402px; background-position: 0 0 ;}. wave2 {height: 427px; width: 2402px; background-position: 0-427px ;}. wave1 {height: 427px; width: 2402px; background-position: 0-854px;} @ keyframes wave {0% {transform: translate (0px, 0px);} 50% {transform: translate (-80px, 30px);} 100% {transform: translate (160px,-60px) ;}@-webkit-keyframes wave {0% {transform: translate (0px, 0px);} 50% {transform: translate (-80px, 30px);} 100% {transform: translate (160px,-60px );}} @-moz-keyframes wave {0% {transform: translate (0px, 0px);} 50% {transform: translate (-80px, 30px);} 100% {transform: translate (160px, -60px );}}. waves {position: absolute; bottom:-135px; height: 527px; width: 100%; overflow: hidden ;}. waves> div {position: absolute; left:-180px; bottom: 0 ;}. waves. wave1 ,. waves. wave2 ,. waves. wave3 {animation: wave 5S transform-in-out alternate infinite ;}. waves. wave2 {animation-delay: 0.6 s ;}. waves. wave3 {animation-delay: 1.2 s ;}. waveContent {position: relative; background-color: #219df3; height: 500px;} h2 {position: relative; display: block; color: # fff; font-size: 48px; font-family: "microsoft yahei"; font-weight: normal; width: 1100px; margin: 0 auto; top: 180px; z-index: 99 ;}</style>

 

Wave animation HTML

 

<! DOCTYPE html> 
 
 
Okay, the code is provided.