Rumah > hujung hadapan web > tutorial css > 用css3实现波纹特效和H5实现动态波浪效果

用css3实现波纹特效和H5实现动态波浪效果

不言
Lepaskan: 2018-06-11 16:44:21
asal
2638 orang telah melayarinya

这篇文章主要介绍了css3实现波纹特效、H5实现动态波浪效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下

css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动态效果,这样就比传统的flash来实现更为简单。而且对页面也比较友好的。

比如实现以下的背景波纹特效:

html5结构:

<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>
Salin selepas log masuk

css3代码:

/*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)
    }
}
Salin selepas log masuk

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何设置CSS 文本字体颜色

如何用CSS实现带阴影效果的黑色导航菜单效果

Atas ialah kandungan terperinci 用css3实现波纹特效和H5实现动态波浪效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan