CSS 3 ripple effects, H5 for dynamic waves, css3h5

CSS 3 ripple effects, H5 for dynamic waves, css3h5

Css3 implements dynamic ripple effects. Because css3 contains transition and animation effects, it is easy to use css3 to implement dynamic ripple effects. It is OK to directly use transform, so that translateX can generate an offset to continuously achieve the dynamic effect of the loop, which is easier to achieve than the traditional flash. It is also friendly to the page.

For example, implement the following background ripple effects:

Html5 structure:

<Div class = "wrap _ uc-hdinfo"> <div class = "inner flexbox"> <div class = "uimg"> <span class = "img">  </span> </div> <a class = "info flex1" href = "#"> <label class = "name"> Luna </label> <label class = "type mt-10"> regular member </label> <label class = "tel ff-ar"> 18621535487 </label> </> <I class = "arr iconfont icon-youjiantou c-fff fs-24"> </I> <a class = "lktel" href = "tel: 15888886666 "> <I c Lass = "iconfont icon-dianhua1"> </I> </a> </div> <! -- Css3 realize ripple --> <div class = "wrap _ uc-waves"> <I class = "wave w1"> </I> <I class = "wave w2"> </I> </div>

Css3 code:

/* Css3 ripple */. wrap _ uc-waves {overflow: hidden; height: 1rem; width: 100%; position: absolute; bottom: 0 ;}. wrap _ uc-waves. wave {width: 15rem; transform-origin: center bottom; position: absolute; left: 0; bottom: 0 ;}. wrap _ uc-waves. w1 {background: url (.. /images/icon__uc-hd-waves01.png) no-repeat; background-size: cover; height :. 5rem; animation: anim_wave 5S linear infinite ;}. wrap _ uc-waves. w2 {background: url (.. /images/icon__uc-hd-waves02.png) no-repeat; background-size: cover; height :. 7rem; animation: anim_wave 6 s linear infinite;} @ keyframes anim_wave {0% {transform: translateX (0) translateZ (0) scaleY (1)} 50% {transform: translateX (-25%) translateZ (0) scaleY (0.55)} 100% {transform: translateX (-50%) translateZ (0) scaleY (1 )}}