Heim > Web-Frontend > H5-Tutorial > Hauptteil

Beispielcode zur Implementierung von Ripple-Effekten mit CSS3 und H5

小云云
Freigeben: 2018-02-02 10:42:17
Original
1696 Leute haben es durchsucht

Css3 implementiert dynamische Welleneffekte. Da CSS3 über Übergangs- und Animationseffekte verfügt, ist es in Ordnung, dies direkt durch die Verwendung von TranslateX zu erreichen Erzielen Sie kreisförmige dynamische Effekte, die einfacher zu implementieren sind als herkömmlicher Blitz. Und es ist auch relativ seitenfreundlich.

Dieser Artikel stellt hauptsächlich CSS3 zur Realisierung von Welleneffekten vor. Es ist sehr gut und hat Referenzwert. Ich hoffe, es kann jedem helfen.

Implementieren Sie beispielsweise die folgenden Hintergrundwelleneffekte:

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>
Nach dem Login kopieren

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)
    }
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Empfohlene 10 Ripple-Spezialeffekte (Sammlung)

Das obige ist der detaillierte Inhalt vonBeispielcode zur Implementierung von Ripple-Effekten mit CSS3 und H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage