CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche

CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche

Ich habe mir vor einiger Zeit Tik Tok angesehen und fand die Schaltflächenanimation beim Folgen sehr schön. Außerdem habe ich mir vor Kurzem Kenntnisse im Front-End angeeignet. Also habe ich darüber nachgedacht, wie ich es selbst umsetzen könnte. Das Endergebnis war okay, aber ich hatte das Gefühl, dass das, was ich getan hatte, nicht gut genug war. Nur als Referenz.

🍻 Endgültiger Effekt

Endergebnis

💡 Ideen

  • Verwenden Sie toggleClass() -Methode von jQuery, um die Klasse active hinzuzufügen und zu entfernen
  • Legen Sie Stile für die ursprünglichen und active Elemente fest und verwenden Sie das CSS- transition , um Änderungszeit, Geschwindigkeit usw. zu definieren.
  • Verwenden Sie CSS- animation , um Änderungsanimationen für active Elemente festzulegen

👨‍💻Umsetzung

HTML

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Dokument</title>
</Kopf>
<Text>
	<!-- Der Einfachheit halber wird div verwendet. Eigentlich können Sie auch eine Schaltfläche verwenden. Sie müssen den Stil festlegen, damit es gut aussieht ^_^-->
	<!-- Ich habe <svg> noch nicht gelernt, vielleicht erhalten Sie mit <svg> bessere Ergebnisse-->
    <div id="followBtn">
        <div id="Zeile1"></div>
        <div id="Zeile2"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

JS

$(function () { // jQuery-Eingabefunktion $('#followBtn').click(function (e) { // Klickereignis binden $('#followBtn').toggleClass('active');
        $('#line1').toggleClass('aktiv');
        $('#line2').toggleClass('aktiv');
    });
})

CSS

Körper {
    Breite: 1024px;
    Rand: 0 auto; /* Mitte */
}

#followBtn {
    Position: relativ;
    Anzeige: Block;
    Breite: 100px;
    Höhe: 100px;
    Rand: 100px automatisch;
    border-radius: 100px; // Mache das Div kreisförmig background-color: #ccc;
    Übergang: alles linear .5s; // Definieren Sie die Eigenschaften der Übergangsanimation, wenn der Stil konvertiert wird}

#followBtn.aktiv {
    Hintergrundfarbe: Purpurrot;
}

#Zeile1 {
    position: absolute; /*Absolute Positionierung, die Positionierung basiert auf dem nächstgelegenen positionierten (relativen, absoluten, festen) Vorgängerelement*/
    links: 25px;
    oben: 46px;
    Anzeige: Block;
    Breite: 50px;
    Höhe: 8px;
    Rahmenradius: 5px;
    Hintergrundfarbe: Purpurrot;
    Übergang: alles linear 0,5 s;
}

#Zeile2 {
    Position: absolut;
    links: 25px;
    oben: 46px;
    Anzeige: Block;
    Breite: 50px;
    Höhe: 8px;
    Rahmenradius: 8px;
    Hintergrundfarbe: Purpurrot;
    transform: rotate(90deg); /* 90 Grad drehen */
    Übergang: alles linear 0,5 s;
}

#line1.active {
    Hintergrundfarbe: #ccc;
    /*Animation auslösen, vorwärts bedeutet, dass nach dem Ende der Animation der Elementstil als Stil des letzten Keyframes der Animation beibehalten wird*/
    Animation: Zeile 1,5 s, vorwärts ein- und ausfahren;
}

#line2.active {
    Hintergrundfarbe: #ccc;
    Animation: Zeile 2, 0,5 s, vorwärts ein- und ausfahren;
}

/* @keyframes definiert die Animation*/
@keyframes Zeile1 {
    50 % {
        Breite: 8px;
        Höhe: 8px;
        links: 20px;
        oben: 52px;
        Rahmenradius: 8px;
    }
    100 % {
        Breite: 30px;
        links: 20px;
        oben: 52px;
        transformieren: drehen (45 Grad);
    }
}

@keyframes Zeile2 {
    50 % {
        Breite: 8px;
        Höhe: 8px;
        Rahmenradius: 8px;
        links: 35px;
    }
    100 % {
        Breite: 50px;
        links: 35px;
        transformieren: drehen (-45 Grad);
    }
}

Trennlinie 👇👇👇Zeichnen Sie das Häkchen mit SVG✔🍻Der endgültige Effekt

Bildbeschreibung hier einfügen

👨‍💻Umsetzung

HTML

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Dokument</title>
</Kopf>

<Text>
    <button id="followBtn">
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
        <!-- Mit SVG zeichnen -->
        <!-- stroke-linecap setzt die Ecken der Polylinie auf Rundung -->
        <!-- stroke-linejoin rundet die Ecken der Polylinie ab -->
        <svg Breite="70px" Höhe="70px" Strichbreite="8" Strichlinienkappe="rund" Strichlinienverbindung="rund" Füllung="keine">
            <polyline points="10,37 30,57 60,17" style="stroke: crimson;"></polyline>
        </svg>
    </button>
    <script src="index.js"></script>
</body>

</html>

JS

❗❗❗Verwenden Sie unbedingt jQuery 3. Versionen unter 3 weisen einen Fehler bei der Bedienung von SVG-Elementen (Hinzufügen von Klassen) auf. 3 behebt dieses Problem.

$(Funktion () {
    $('#followBtn').klick(Funktion (e) {
        $('#followBtn').toggleClass('aktiv');
        $('.line').toggleClass('aktiv');
        $('Polylinie').toggleClass('aktiv');
    });
})

CSS

Körper {
    Breite: 1024px;
    Rand: 0 automatisch;
}

#followBtn {
    Position: relativ;
    Anzeige: Block;
    Breite: 100px;
    Höhe: 100px;
    Rand: 100px automatisch;
    Rand: keiner;
    Rahmenradius: 100px;
    Hintergrundfarbe: Purpurrot;
    Übergang: alles linear 0,5 s;
}

#followBtn:Fokus {
    Umriss: keine; /* Beim Klicken im Browser wird kein blaues Kästchen angezeigt*/
}

#followBtn.aktiv {
    Hintergrundfarbe: #ccc;
}

.Linie {
    position: absolute; /*Absolute Positionierung, die Positionierung basiert auf dem nächstgelegenen positionierten (relativen, absoluten, festen) Vorgängerelement*/
    links: 25px;
    oben: 46px;
    Breite: 50px;
    Höhe: 8px;
    Rahmenradius: 8px;
    Hintergrundfarbe: #ccc;
    Übergang: Easy-In 0;
}

.line:n-tes-Kind(1) {
    transformieren: drehen (90 Grad);
}

.line.aktiv {
    Animation: 0,5 s vorwärts ausblenden;
}

Polylinie
    /* Die Eigenschaft „stroke-dasharray“ legt den Linienabstand so fest, dass eine Kurve entsteht.
     * Wenn die Lücke groß genug ist, scheint die Linie verborgen zu sein. * Die Eigenschaft stroke-dashoffset gibt den Abstand vom Strichmuster zum Anfang des Pfads an. Wenn sie 0 ist, ist die Linie vollständig sichtbar. */
    Strich-Dasharray: 80px;
    Strich-Schema-Höhepunkt: 80px;
}

Polylinie.aktiv {
    Animation: 0,5 s vorwärts zeigen;
    Animationsverzögerung: 0,5 s;
}

@keyframes zeigen {
    Zu {
        Strich-Dashoffset: 0;
    }
}

@keyframes verblassen {
    Zu {
        Deckkraft: 0;
        transformieren: drehen (360 Grad) skalieren (0,5, 0,5);
    }
}

👨‍🎓Einblicke

Gewöhnliche HTML-Elemente und SVG-Elemente werden unterschiedlich gedreht:

transform-origin eines normalen HTML-Elements befindet sich standardmäßig in dessen Mitte. transform-origin eines SVG-Elements befindet sich standardmäßig in der oberen linken Ecke der SVG-Leinwand.

HTML vs. SVG

Um das blaue Kästchen nach dem Klicken auf die Schaltfläche zu entfernen, können Sie outline: none;

jQuery-Versionen unter 3 können die Klasse von SVG-Elementen nicht korrekt ändern.

//Die Methode .attr() ist für SVG gültig. Wenn Sie also jQuery verwenden müssen, // verwenden Sie $("#item").attr("class", "oldclass newclass"); // anstelle von .addClass("newclass")
// Verwenden Sie $("#item").attr("class", "oldclass"); // anstelle von .removeClass("newclass")
// Native JS-Lösung var element = document.getElementById("item");
// Verwenden Sie element.setAttribute("Klasse", "alteKlasse neueKlasse");
// Verwenden Sie element.setAttribute("Klasse", "alteKlasse");

🔗Referenzen

Transformationen von SVG-Elementen

jQuery SVG, warum kann ich keine Klasse hinzufügen?

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS den Animationseffekt der Douyin-Abonnementschaltfläche erzielen. Weitere verwandte CSS-Inhalte zur Douyin-Abonnementschaltflächenanimation finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter in den verwandten Artikeln unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Eine detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten

>>:  Tutorial zum Erstellen einer visuellen Leistungsüberwachungsplattform mit JMeter+Grafana+InfluxDB in einer Docker-Umgebung

Artikel empfehlen

Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung

Inhaltsverzeichnis Kurze Einleitung 1. Überprüfen...

MySQL-Performance-Optimierung: So nutzen Sie Indizes effizient und richtig

Die Praxis ist der einzige Weg, die Wahrheit zu t...

Lösung für die langsame Reaktion des Tomcat-Servers

1. Analytisches Denken 1. Beseitigen Sie die eige...

Zusammenfassung der häufigsten Fehler im Webdesign

Bei der Gestaltung einer Webseite passieren Desig...

So ändern Sie das Root-Passwort in MySQL 5.7

Ab MySQL 5.7 wurden viele Sicherheitsupdates hinz...

Ausführliche Erläuterung der Standortpriorität von Nginx

Standortausdruckstyp ~ bedeutet, dass ein regulär...

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

Inhaltsverzeichnis Fallstricke bei Zeitstempelver...

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Vorwort Bei der WeChat-Applet-Entwicklung (native...

Confluence mit Docker bereitstellen

1. Umweltanforderungen 1. Docker 17 und höher wur...

Beispiel für einen WeChat-Applet-Rechner

In diesem Artikel wird der spezifische Code des W...

Grundlegende Hinweise zu HTML und CSS (unbedingt für das Frontend lesen)

Als ich zum ersten Mal mit HTML in Berührung kam,...

Jenkins erstellt Docker-Images und überträgt sie in das Harbor-Warehouse.

Inhaltsverzeichnis Docker-Datei pom.xml Jenkins-K...

Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS

Einführung in Rahmeneigenschaften border -Eigensc...

Detaillierte Erläuterung der Vorteile von PNG in verschiedenen Netzwerkbildformaten

BMP ist ein von Hardwaregeräten unabhängiges und ...

Get/Delete-Methode zum Übergeben von Array-Parametern in Vue

Wenn Front-End und Back-End interagieren, müssen ...