Verwenden Sie CSS3, um Welleneffekte zu erzielen, und H5, um dynamische Welleneffekte zu erzielen

In diesem Artikel werden hauptsächlich CSS3 zur Realisierung des Wellen-Spezialeffekts und H5 zur Realisierung des dynamischen Welleneffekts vorgestellt. Es ist sehr gut und hat Referenzwert.

CSS3 zur Realisierung Dynamischer Wellen-Spezialeffekt, da es für Übergangs- und Animationseffekte jetzt sehr einfach ist, dynamische Welleneffekte mit CSS3 zu erzielen. Durch die Erstellung eines TranslateX-Offsets können Sie kontinuierlich dynamische Welleneffekte erzielen ist einfacher als die herkömmliche Flash-Implementierung. Und es ist auch relativ seitenfreundlich.

Implementieren Sie beispielsweise die folgenden Welleneffekte im Hintergrund:

HTML5-Struktur:

<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)
    }
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So legen Sie CSS fest Textschriftfarbe

So verwenden Sie CSS, um einen schwarzen Navigationsmenüeffekt mit Schatteneffekt zu erzielen

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Welleneffekte zu erzielen, und H5, um dynamische Welleneffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!