Example code for implementing ripple effects using css3 and H5

css3 implements dynamic ripple effects. Since there are transitions and animation effects in css3, it is now very simple to use css3 to achieve dynamic wave effects. It is ok to directly use transform to achieve it. By making translateX offset, you can continuously achieve circular dynamic effects. , which is simpler to implement than traditional flash. And it’s also relatively friendly to the page.

This article mainly introduces CSS3 to achieve ripple effects and H5 to achieve dynamic wave effects. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

For example, implement the following background ripple effects:

html5 structure:

<p class="wrap__uc-hdinfo">
    <p class="inner flexbox">
        <p class="uimg">
            <span class="img"><img src="images/uimg/uimg-def.jpg" /></span>
        </p>
        <a class="info flex1" href="#">
            <label class="name">露娜</label>
            <label class="type mt-10">普通会员</label>
            <label class="tel ff-ar">18621535487</label>
        </a>
        <i class="arr iconfont icon-youjiantou c-fff fs-24"></i>
        <a class="lktel" href="tel:15888886666"><i class="iconfont icon-dianhua1"></i></a>
    </p>
    <!--css3实现波纹-->
    <p class="wrap__uc-waves">
        <i class="wave w1"></i>
        <i class="wave w2"></i>
    </p>
</p>

css3 code:

/*css3波纹*/
.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 6s 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)
    }
}

Related recommendations:

Recommended 10 ripple effects ( collect)

The above is the detailed content of Example code for implementing ripple effects using css3 and H5. For more information, please follow other related articles on the PHP Chinese website!