Beispielcode zur Implementierung des Schaltflächeneffekts „Wassertropfen-Wellenanimation“ mit CSS+JS

Der Code sieht folgendermaßen aus:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        .btn{ 
            Anzeige: Block; 
            Breite: 300px; 
            Höhe: 100px;
            Rand: 50px; 
            Umriss: 0; 
            Überlauf: versteckt;  
            Position: relativ; 
            Übergang: .3s; 
            Cursor: Zeiger; 
            Benutzerauswahl: keine;  
            Textausrichtung: zentriert; 
            Zeilenhöhe: 100px; 
            Schriftgröße: 50px; 
            Hintergrund: Tomate; 
            Farbe: #fff;  
            Rahmenradius: 10px;
        }
        .btn>span{ 
            Position: absolut; 
            links: 0; 
            oben: 0;
            Breite: 100 %; 
            Höhe: 100%;}
        .btn>span:nach{ 
            Inhalt: ''; 
            Position: absolut; 
            Hintergrund: transparent; 
            Randradius: 50 %; 
            Breite: 100 %; 
            Polsterung oben: 100 %; 
            Rand links: -50 %; 
            Oberer Rand: -50 %; 
            links: var(--x,-100%); 
            oben: var(--y,-100%); 
        }
        .btn:aktiv{ 
            Hintergrund: orangerot;
        }
        .btn>Eingabe[Typ=Kontrollkästchen]{
            Anzeige: keine
        }
        .btn>Eingabe[Typ=Kontrollkästchen]+span:nach{
            Animation: Ripple-in 1 s;
        }
        .btn>Eingabe[Typ=Kontrollkästchen]:aktiviert+span:nach{
            Animation: Wellenform 1 s;
        }
        @keyframes ripple-in{
            aus {
                transformieren: Skalierung(0);
                Hintergrund: rgba(0,0,0,.25)
            }
            Zu {
                transformieren: Skalierung (1,5);
                Hintergrund: transparent
            }
        }
        @keyframes ripple-out{
            aus {
                transformieren: Skalierung(0);
                Hintergrund: rgba(0,0,0,.25)
            }
            Zu {
                transformieren: Skalierung (1,5);
                Hintergrund: transparent
            }
        }
    </Stil>
</Kopf>
<Text>
    <label class="btn" tabindex="1">
        <input type="checkbox"><span onclick="ripple(this,event)">Schaltfläche</span>
    </Bezeichnung>
</body>

<Skript>
    Funktion Ripple (dom, ev) {
        console.log(ev)
        var x = ev.offsetX;
        var y = ev.offsetY;
        dom.style.setProperty('--x',x+'px');
        dom.style.setProperty('--y',y+'px');
}
</Skript>
</html>

Bildbeschreibung hier einfügen

Damit ist dieser Artikel über den Beispielcode zur Implementierung des Wassertropfen-Wellen-Animationsschaltflächeneffekts mit CSS+JS abgeschlossen. Weitere relevante CSS-Inhalte zur Wassertropfen-Wellen-Animationsschaltfläche finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Klassifizierung der Farbeigenschaften von Webseiten

>>: Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue