HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

Erster Blick auf die Wirkung:

Bildbeschreibung hier einfügen

Vorwort:

Auf diese Idee kam ich, nachdem ich den Uploader Steven auf Bilibili gesehen hatte. Ich fand es großartig, also habe ich selbst eines gemacht. (reines CSS), im Folgenden ist der detaillierte Vorgang beschrieben. Am Ende befindet sich ein vollständiger Code.

erreichen:

1. Definieren Sie zunächst ein Div-Tag als Schaltfläche mit dem Klassennamen .anniu:

 <div class="anniu">Aurora Borealis Nacht</div>

2. Grundlegender CSS-Stil, Länge, Breite, Schriftgröße usw. von .anniu:

.anniu,.anniu::nach{
           Schriftfamilie: „Do Hyeon“, serifenlos;
           Breite: 260px;
           Höhe: 80px;
           Textausrichtung: zentriert;
           Schriftgröße: 22px;
           Zeilenhöhe: 80px;
           Farbe: RGB (255, 251, 251);
           Hintergrund: linearer Farbverlauf (30 Grad, transparent 10 %, RGB (255, 136, 0) 10 % 95 %, RGB (0, 255, 149) 95 %);
           Kastenschatten: 5px 0 0 RGB (0, 204, 255);
           Cursor: Zeiger;
           Position: relativ;
       }

Schriftfamilie: „Do Hyeon“, serifenlos; stellt die Schriftart dar. Sie können diese Website besuchen, auf der es viele Schriftarten gibt.
Hintergrund: linearer Farbverlauf (30 Grad, transparent 10 %, RGB (255, 136, 0) 10 % 95 %, RGB (0, 255, 149) 95 %);
Nutzen Sie die Hintergrundfarbe geschickt, um die Form mit den abgeschnittenen Ecken zu erstellen. Diese Aussage bedeutet, dass der Farbverlauf bei einem Winkel von 30 Grad beginnt, 0 bis 10 % eine transparente Farbe anzeigt, 10 % bis 95 % Orange anzeigt und 95 % bis 100 % Grün anzeigt.
Box-Shadow: 5px 0 0 rgb(0, 204, 255); stellt den blauen Schatten auf der rechten Seite dar.
Cursor: Zeiger; bedeutet, dass sich der Pfeil in eine kleine Hand verwandelt, wenn die Maus darüber fährt.

3. Definieren Sie eine doppelte Pseudoklasse, die genau wie .anniu aussieht, und decken Sie .anniu durch absolute Positionierung ab. Derselbe grundlegende Stil wurde in Schritt 2 im Union-Selektor von .anniu definiert. Fügen Sie den folgenden Stil hinzu:

.anniu::nach{
           Inhalt: ,Aurora Borealis Nacht‘;
           Position: absolut;
           oben: 0;
           links: 0;
           Textschatten: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115);
           Sichtbarkeit: versteckt;
          
       }

Textschatten: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115); stellt den Schatten der Schriftart dar, sodass die Schriftart oben links und unten rechts jeweils einen Schatten der Farben rgb(0, 183, 255) und rgb(0, 255, 115) hat.
Sichtbarkeit: versteckt; bedeutet, diese Pseudoklasse zu verstecken.

4. Verwenden Sie die Eigenschaft „clip-path: inset()“, um den Bereich auszuschneiden, und „transform: translate();“, um den Effekt einmal zu versetzen.
Die konkrete Bedeutung ist wie folgt:
clip-path: inset() bedeutet, dass Sie durch Clipping einen anzeigbaren Bereich (Rechteck) des Elements erstellen können, sodass der Teil innerhalb des Bereichs angezeigt und der Teil außerhalb des Bereichs ausgeblendet wird.
transformieren: translate() bedeutet verschieben;

Beispielsweise das Ausschneiden der doppelten Pseudoklasse: clip-path: inset(20% -5px 60% 0); transform: translate（-5px，0）; das Ergebnis ist wie folgt

Bildbeschreibung hier einfügen

(20 % -5px 60 % 0); bedeutet, dass die Pseudoklasse „cropping“ von oben nach unten 20 % abschneidet, von rechts nach links -5px abschneidet (negativ, da dies zur Anzeige des Schattens erforderlich ist), von unten nach oben 60 % abschneidet und von links nach rechts 0 % abschneidet. Auf diese Weise bleibt nur ein rechteckiger Teil mit einer Höhe von 20 % und einer Breite von 5px übrig. Die restlichen abgeschnittenen Kanten werden ausgeblendet. Stellen Sie gleichzeitig „translate()“ so ein, dass es ein wenig nach links verschoben wird, um den obigen Effekt zu erzielen.

Als nächstes schneiden Sie den Pseudoklasseneffekt noch dreimal zu.
Clip-Pfad: Inset(50 % -5px 30 % 0); erhält:

Bildbeschreibung hier einfügen

Clip-Pfad: Inset(80 % -5px 5 % 0); erhält:

Bildbeschreibung hier einfügen

Clip-Pfad: Einschub (0 -5px 80 % 0); erhält:

Bildbeschreibung hier einfügen

5. Nach dem Zuschneideeffekt im vierten Schritt können wir die Animation einstellen. Wenn die Maus darüber fährt, werden verschiedene Zuschneideeffekte und Versatzeffekte der Pseudoklasse angezeigt. Die Zuschneideposition und die Versatzposition können nach eigenem Empfinden eingestellt werden.

 .anniu:hover::nach{
           Animation: San 1s; 
           Animations-Timing-Funktion: Schritte (1, Ende);
       }

 @keyframes san{
           0 %{
            Clip-Pfad: Einschub (20 % -5px 60 % 0);
            transformieren: übersetzen(-6px,5px);
            Sichtbarkeit: sichtbar;
           }
           10 %
            Clip-Pfad: Einschub (50 % -5px 30 % 0);
            transformieren: übersetzen(6px,-5px);
           }
           20 %
            Clip-Pfad: Einschub (20 % -5px 60 % 0);
            transformieren: übersetzen(5px,0px);

            }
            30 %
                Clip-Pfad: Einschub (80 % -5px 5 % 0);
            transformieren: übersetzen(-8px,5px);
            }
            40 %
                Clip-Pfad: Einschub (0 -5px 80 % 0);
            transformieren: übersetzen(-4px,-3px);

            }
            50 %{
                Clip-Pfad: Einschub (50 % -5px 30 % 0);
            transformieren: übersetzen(-6px,-5px);
            }
            60 %
                Clip-Pfad: Einschub (80 % -5px 5 % 0);
            transformieren: übersetzen(-7px,5px);

            }
            70 %
                Clip-Pfad: Einschub (0 -5px 80 % 0);
            transformieren: übersetzen(3px,6px);
            }
            80 %
                Clip-Pfad: Einschub (50 % -5px 30 % 0);
            transformieren: übersetzen(5px,5px);

            }
            90 %
                Clip-Pfad: Einschub (20 % -5px 60 % 0);
            transformieren: übersetzen(6px,-5px);

            }
            100 %{
                Clip-Pfad: Einschub (0 -5px 80 % 0);
            transformieren: übersetzen(1px,5px);

            }
       }

Sichtbarkeit: sichtbar; macht die Pseudoklasse sichtbar.
Animations-Timing-Funktion: Schritte (1, Ende); 1 bedeutet 0 % bis 10 %, 10 % bis 20 %, … dazwischen wird nur ein Frame verwendet. Wenn Sie 2 schreiben, sind es zwei Frames. Es wird nur ein Frame verwendet, um einen besseren Stottern-Effekt zu erzielen. „Ende“ gibt an, dass das erste Frame den Anfang des ersten Animationsschritts darstellt. Wenn es „Start“ ist, bedeutet dies, dass das erste Frame das Ende des ersten Schritts der Animation ist.

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
    <Stil>
       *{
           Rand: 0;
           Polsterung: 0;
           Box-Größe: Rahmenbox;
       }
       Körper{
           Höhe: 100vh;
           Anzeige: Flex;
           Elemente ausrichten: zentrieren;
           Inhalt ausrichten: zentriert;
           Hintergrundfarbe: rgb(243, 239, 8);
       }
       .anniu,.anniu::nach{
           Schriftfamilie: „Do Hyeon“, serifenlos;
           Breite: 260px;
           Höhe: 80px;
           Textausrichtung: zentriert;
           Schriftgröße: 22px;
           Zeilenhöhe: 80px;
           Farbe: RGB (255, 251, 251);
           Hintergrund: linearer Farbverlauf (30 Grad, transparent 10 %, RGB (255, 136, 0) 10 % 95 %, RGB (0, 255, 149) 95 %);
           Kastenschatten: 5px 0 0 RGB (0, 204, 255);
           Cursor: Zeiger;
           Position: relativ;
       }
       .anniu::nach{
           Inhalt: ,Aurora Borealis Nacht‘;
           Position: absolut;
           oben: 0;
           links: 0;
           Textschatten: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115);
           Sichtbarkeit: versteckt;
          
       } 
       .anniu:hover::nach{
           Animation: San 1s; 
           Animations-Timing-Funktion: Schritte (1, Ende);
       }

       /* 
       
       Clip-Pfad: Einschub (20 % -5px 60 % 0);
       Clip-Pfad: Einschub (50 % -5px 30 % 0);
       Clip-Pfad: Einschub (80 % -5px 5 % 0);
       Clip-Pfad: Einschub (0 -5px 80 % 0);
       
       
        */
       @keyframes san{
           0 %{
            Clip-Pfad: Einschub (20 % -5px 60 % 0);
            transformieren: übersetzen(-6px,5px);
            Sichtbarkeit: sichtbar;
           }
           10 %
            Clip-Pfad: Einschub (50 % -5px 30 % 0);
            transformieren: übersetzen(6px,-5px);
           }
           20 %
            Clip-Pfad: Einschub (20 % -5px 60 % 0);
            transformieren: übersetzen(5px,0px);

            }
            30 %
                Clip-Pfad: Einschub (80 % -5px 5 % 0);
            transformieren: übersetzen(-8px,5px);
            }
            40 %
                Clip-Pfad: Einschub (0 -5px 80 % 0);
            transformieren: übersetzen(-4px,-3px);

            }
            50 %{
                Clip-Pfad: Einschub (50 % -5px 30 % 0);
            transformieren: übersetzen(-6px,-5px);
            }
            60 %
                Clip-Pfad: Einschub (80 % -5px 5 % 0);
            transformieren: übersetzen(-7px,5px);

            }
            70 %
                Clip-Pfad: Einschub (0 -5px 80 % 0);
            transformieren: übersetzen(3px,6px);
            }
            80 %
                Clip-Pfad: Einschub (50 % -5px 30 % 0);
            transformieren: übersetzen(5px,5px);

            }
            90 %
                Clip-Pfad: Einschub (20 % -5px 60 % 0);
            transformieren: übersetzen(6px,-5px);

            }
            100 %{
                Clip-Pfad: Einschub (0 -5px 80 % 0);
            transformieren: übersetzen(1px,5px);

            }
       }
    </Stil>
</Kopf>
<Text>
    <div class="anniu">Aurora Borealis Nacht</div>
</body>
</html>

Dies ist das Ende dieses Artikels über die Implementierung von Schaltflächen im Cyberpunk-Stil mit HTML+CSS. Weitere relevante Inhalte zu Schaltflächen im Cyberpunk-Stil mit HTML+CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten

>>:  HTML+CSS zum Erstellen eines geschichteten Pyramidenbeispiels

Artikel empfehlen

Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet

Fehlerbeschreibung percona5.6, mysqldump vollstän...

So verwenden Sie Linux-Befehle in IDEA

Im Vergleich zum Windows-System bietet das Linux-...

Verwendung des Linux-Befehls ifconfig

1. Befehlseinführung Der Befehl ifconfig (Netzwer...

Was tun, wenn Sie das Root-Passwort von Mysql5.7 vergessen (einfache und effektive Methode)

Im vorherigen Artikel haben wir vorgestellt, wie ...

HTML-Grundlagen: HTML-Inhaltsdetails

Beginnen wir mit dem Körper: Wenn Sie eine Webseit...

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

<br />Einige Webseiten sehen nicht groß aus,...

Detaillierte Erklärung des einfachen Stores von Vue

Die einfachste Store-Anwendung in Vue ist die glo...

Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3

Was bedeutet Textfüllfarbe? Rein wörtlich bedeute...

Detaillierte Installation und Verwendung der Virtuoso-Datenbank unter Linux

Ich habe kürzlich einige Dinge zu verknüpften Dat...

Implementierung des React-Konfigurations-Subroutings

1. Die Komponente First.js hat Unterkomponenten: ...

Vue hält den Benutzer angemeldet (verschiedene Token-Speichermethoden)

Inhaltsverzeichnis So setzen Sie Cookies Nachteil...

Konfigurationshandbuch für den Lastenausgleich auf Ebene 4 von Nginx

1. Einführung in Layer 4 Load Balancing Was ist L...

So behandeln Sie einen Überlauf numerischer MySQL-Typen

Lassen Sie mich Ihnen nun eine Frage stellen. Was...

Beschreibung der HTML-Meta-Viewport-Attribute

Was ist ein Ansichtsfenster? Mobile Browser platz...

Implementierung des WeChat-Tap-Animationseffekts basierend auf dem CSS3-Animationsattribut

Als ich die kürzlich beliebte WeChat-Tap-Funktion...