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

Welche Eigenschaften sollte eine gute Werbung haben?

Manche Leute sagen, dass Werbung machen wie ein Me...

WeChat-Applet implementiert SMS-Login in Aktion

Inhaltsverzeichnis 1. Vorschau der Schnittstellen...

Vue verwendet Element-UI, um die Menünavigation zu implementieren

In diesem Artikel wird der spezifische Code von V...

Detaillierte Erläuterung der MySQL-Datenbankisolationsebene und des MVCC

Inhaltsverzeichnis 1. Isolationsstufe LESEN SIE U...

Implementierung der Nginx-Domänennamenweiterleitung

Einführung in Nginx Nginx („engine x“) ist ein le...

So stellen Sie eine einzelne Datenbank oder Tabelle in MySQL wieder her und mögliche Fallstricke

Vorwort: Das am häufigsten verwendete logische My...

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Dieser Artikel veranschaulicht anhand von Beispie...

Tutorial zur Installation von MySQL 5.7.18 unter Windows 10

In diesem Tutorial erfahren Sie alles über die In...

Verwendung des Linux-Befehls „sar“ und Analyse von Codebeispielen

1. CPU-Auslastung sar -p (den ganzen Tag anzeigen...

Detaillierte Erklärung der CSS3-Textschatteneigenschaft Textschatten

Textschatten-Textschatten-Eigenschaftseffekte: 1....

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

Laden Sie zunächst das Installationspaket von der...

Analyse der schlechten Leistung, die durch einen großen LIMIT-Offset in der MySQL-Abfrage verursacht wird

Vorwort Wir alle wissen, dass MySQL-Abfragen den ...

Docker unter Linux installieren (sehr einfache Installationsmethode)

Ich hatte in letzter Zeit ziemlich viel Zeit. Ich...

So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um

Problembeschreibung Auf mehreren Rechnern wurden ...

Teilen Sie 20 JavaScript-Einzeilencodes

Inhaltsverzeichnis 1. Holen Sie sich den Wert des...