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

So deinstallieren Sie IIS7-Web- und FTP-Dienste in Win7 vollständig

Nachdem ich gestern die PHP-Entwicklungsumgebung ...

So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden

So geben Sie das übergeordnete Verzeichnis an ../ ...

So fügen Sie Emoji-Ausdrücke in MySQL ein

Vorwort Als ich heute ein Feedback-Formular für e...

HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)

HTML: Titel Überschriften werden durch Tags wie &...

Tutorial zur MySQL-SQL-Optimierung: IN- und RANGE-Abfragen

Lassen Sie uns zunächst über die in()-Abfrage spr...

js, um einen coolen Feuerwerkseffekt zu erzielen

In diesem Artikel finden Sie den spezifischen Cod...

Implementierungsmethode für den React State-Zustand und Lebenszyklus

1. Methoden zur Implementierung von Komponenten:組...

Verwenden von Shadowsocks zum Erstellen eines transparenten LAN-Gateways

Inhaltsverzeichnis Installieren und konfigurieren...

Lösung für verstümmelte chinesische Schriftzeichen beim Bedienen einer MySQL-Datenbank in CMD

Ich habe auf Baidu gesucht. . Manche Leute sagen,...

Codeanalyse synchroner und asynchroner SetState-Probleme in React

React entstand als internes Projekt bei Facebook....

Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose

Die Verwendung von depends_on zum Sortieren von C...

Detaillierte Konfigurationsschritte zur Installation von Linux (CentOS) unter einer virtuellen VMware-Maschine

CentOS7 herunterladen Das Image, das ich herunter...

Anwendung der MapState-Idee in Vuex

Inhaltsverzeichnis 1. Kartenmethode 2. Anwendung ...

Detaillierte Erklärung der Funktionsweise der Node.js-Middleware

Inhaltsverzeichnis Was ist Express-Middleware? Vo...

So stellen Sie DoNetCore mit Nginx in der Alibaba Cloud bereit

Grundlegende Umgebungskonfiguration Bitte kaufen ...