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

CSS zum Erzielen eines schnellen und coolen Schüttelanimationseffekts

1. Einführung in Animate.css Animate.css ist eine...

Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist

Als ich kürzlich Webseiten mit PHP schrieb, habe i...

HTML-Formular und die Verwendung interner Formular-Tags

Code kopieren Der Code lautet wie folgt: <html...

Detaillierte Erklärung, wie eine SQL-Anweisung in MySQL ausgeführt wird

Überblick Ich habe vor Kurzem begonnen, mir Wisse...

Fallanalyse mehrerer MySQL-Aktualisierungsvorgänge

Inhaltsverzeichnis Fallstudie Kontostand aktualis...

MySQL 8.0.12 Installationskonfigurationsmethode und Kennwortänderung

In diesem Artikel werden die Installations- und K...

Ändern Sie das JVM-Kodierungsproblem, wenn Tomcat ausgeführt wird

Frage: Vor kurzem traten bei der Bereitstellung d...

Detaillierte Erläuterung der Idee, mysqldump + expect + crontab zur Implementierung eines regelmäßigen MySQL-Cold-Backups unter Linux zu verwenden

Inhaltsverzeichnis 1. Aufgetretene Probleme 2. Id...

Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten

Inhaltsverzeichnis Vorwort 1. 404 Seite 1. Ursach...

Zusammenfassung der React-Grundlagen

Inhaltsverzeichnis Vorwort Start React-Lebenszykl...

Grafisches Tutorial zur Installation und Verwendung von MySQL 5.7.17

MySQL ist ein relationales Datenbankverwaltungssy...

JS ermittelt die Position des n-ten Vorkommens einer angegebenen Zeichenfolge in einer Zeichenfolge

Erfahren Sie mehr über ähnliche Methoden zum Ermi...

Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet

Amtliche Dokumentation: Daher sollte MySQL wie fo...

Lösung für den Konflikt zwischen Nginx und Backend-Port

Frage: Bei der Entwicklung des Alice-Verwaltungss...

Lösung - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Unzureichende Berechtigungen

1) Geben Sie den Ordnerpfad ein, in dem die JDK-D...