SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

Eine Vektorwelle

<svg viewBox="0 0 560 20" Klasse="Wellenanimation__Wasserwelle Wellenanimation__Wasserwelle--front">
    <use xlink:href="#wave"></use>
</svg>
<svg id="Welle" Breite="100%" Höhe="100%">
    <Pfad d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></Pfad>
    <Pfad d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></Pfad>
    <Pfad d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></Pfad>
    <Pfad d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></Pfad>

Vollständiger Code:

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite,Anfangsskalierung=1,Benutzerskalierbar=nein">
</Kopf>

<Text>
    <div Klasse="Kreis-Countdown Kreis-Countdown--beendet">
        <div Klasse="Kreis-Countdown__Content-Wrapper">
            <div Klasse="Kreis-Countdown__Inhalt Wellenanimation">
                <div id="Wasser" Klasse="Wellenanimation__Wasser">
                    <svg viewBox="0 0 560 20" Klasse="Wellenanimation__Wasserwelle Wellenanimation__Wasserwelle--zurück">
                        <Pfad
                            d="M420,20c21,5-0,4,38,8-2,5,51,1-4,5c13,4-2,2,26,5-5,2,27,3-5,4C514,6,5,518,4,7,528,5,2,7c7,1-1,3,17,9-2,8,31,5-2,7c0,0,0,0,0,0v20H420z">
                        </Pfad>
                        <Pfad
                            d="M420,20c-21,5-0,4-38,8-2,5-51,1-4,5c-13,4-2,2-26,5-5,2-27,3-5,4C326,6,5,322,4,7,311,5,2,7C304,3,1,4,293,6-0,1,280,0c0,0,0,0,0,0v20H420z">
                        </Pfad>
                        <Pfad
                            d="M140,20c21,5-0,4,38,8-2,5,51,1-4,5c13,4-2,2,26,5-5,2,27,3-5,4C234,6,5,238,4,7,248,5,2,7c7,1-1,3,17,9-2,8,31,5-2,7c0,0,0,0,0,0v20H140z">
                        </Pfad>
                        <Pfad
                            d="M140,20c-21,5-0,4-38,8-2,5-51,1-4,5c-13,4-2,2-26,5-5,2-27,3-5,4C46,6,5,42,4,7,31,5,2,7C24,3,1,4,13,6-0,1,0,0c0,0,0,0,0,0l0,20H140z">
                        </Pfad>
                    </svg>
                    <svg viewBox="0 0 560 20" Klasse="Wellenanimation__Wasserwelle Wellenanimation__Wasserwelle--front">
                        <Pfad
                            d="M420,20c21,5-0,4,38,8-2,5,51,1-4,5c13,4-2,2,26,5-5,2,27,3-5,4C514,6,5,518,4,7,528,5,2,7c7,1-1,3,17,9-2,8,31,5-2,7c0,0,0,0,0,0v20H420z">
                        </Pfad>
                        <Pfad
                            d="M420,20c-21,5-0,4-38,8-2,5-51,1-4,5c-13,4-2,2-26,5-5,2-27,3-5,4C326,6,5,322,4,7,311,5,2,7C304,3,1,4,293,6-0,1,280,0c0,0,0,0,0,0v20H420z">
                        </Pfad>
                        <Pfad
                            d="M140,20c21,5-0,4,38,8-2,5,51,1-4,5c13,4-2,2,26,5-5,2,27,3-5,4C234,6,5,238,4,7,248,5,2,7c7,1-1,3,17,9-2,8,31,5-2,7c0,0,0,0,0,0v20H140z">
                        </Pfad>
                        <Pfad
                            d="M140,20c-21,5-0,4-38,8-2,5-51,1-4,5c-13,4-2,2-26,5-5,2-27,3-5,4C46,6,5,42,4,7,31,5,2,7C24,3,1,4,13,6-0,1,0,0c0,0,0,0,0,0l0,20H140z">
                        </Pfad>
                    </svg>
                </div>
            </div>
        </div>
    </div>


    <Stil>
        .Kreis-Countdown {
            Breite: 441px;
            Höhe: 441px;
            Position: relativ;
            oben: 0;
            links: 0;
            Polsterung: 2,5rem;
            Rand: 1px durchgezogen #fb64b6;
            Randradius: 50 %;
            Überlauf: versteckt;
        }

        .Wellenanimation {
            Überlauf: versteckt;
        }


        .wave-animation__percent {
            Position: absolut;
            links: 0;
            oben: 0;
            Z-Index: 3;
            Breite: 100 %;
            Höhe: 100%;
            Anzeige: Flex;
            Anzeige: -webkit-flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
            Farbe: #fff;
            Schriftgröße: 64px;
        }

        .Wellenanimation__Wasser {
            Position: absolut;
            links: 0;
            oben: 0;
            z-Index: -1;
            Breite: 100 %;
            Höhe: 100%;
            /* Durch Anpassen der 60 % können der Verlauf und die Höhe der Welle verändert werden*/
            transformieren: übersetzen(0, berechnen(100 % - 60 %));
            Hintergrund: #f852d6;
            Übergang: alles 2er;
        }

        .Wellenanimation__Wasserwelle {
            Breite: 200 %;
            Position: absolut;
            unten: 100 %;


        }

        .wave-animation__water-wave--zurück {
            rechts: 0;
            füllen: #1d1d1d;
            Animation: Wave-Back 1,4 s unendlich linear;
        }

        .wave-animation__wasser-welle--front {
            links: 0;
            füllen: #f852d6;
            Rand unten: -1px;
            Animation: Wellenfront 0,7 s unendlich linear;
        }

        @keyframes Wellenfront {
            100 % {
                transformieren: übersetzen(-50 %, 0);
            }
        }

        @keyframes wave-back {
            100 % {
                transformieren: übersetzen(50 %, 0);
            }
        }
    </Stil>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte

>>: Zen Coding Einfaches und schnelles HTML-Schreiben