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

Einfaches Beispiel für den Grenzwertparameter der MySQL-Paging

Zwei Parameter der MySQL-Paging Wählen Sie * aus ...

Detaillierte Schritte zum Speichern von Emoji-Ausdrücken in MySQL

Verursacht durch: java.sql.SQLException: Falscher...

Detaillierte Erklärung zur Verwendung von awk unter Linux

Bevor wir awk lernen, sollten wir sed, grep, tr, ...

Verwendung von MySQL-Triggern

Inhaltsverzeichnis 1. Trigger-Einführung 1. Was i...

Warum sollte CSS im Head-Tag platziert werden?

Denken Sie darüber nach: Warum sollte css im head...

Detailliertes Tutorial zum Erstellen einer JMeter+Grafana+Influxdb-Überwachungsplattform mit Docker

Wir alle wissen, dass Jmeter eine native Ergebnis...

So rufen Sie ein Verzeichnis/einen Ordner in Linux auf, ohne den CD-Befehl zu verwenden

Wie wir alle wissen, können wir in Linux ohne den...

So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest

Inhaltsverzeichnis Einige grundlegende Konfigurat...

JavaScript-Simulationsrechner

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

Installieren Sie JDK1.8 in einer Linux-Umgebung

Inhaltsverzeichnis 1. Installationsumgebung 2. In...

Vorteile und Probleme des XHTML CSS Website Designs

XHTML ist die derzeit international verbreitete S...

Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?

Als Softwareentwickler müssen Sie über ein vollst...

Vue verwendet E-Charts, um ein Organigramm zu zeichnen

Gestern habe ich einen Blog über den kreisförmige...

Eine kurze Zusammenfassung aller Kapselungsmethoden in Vue

Inhaltsverzeichnis 1. Kapselungs-API 2. Globale T...

Vue einfache Implementierung einer Plattenspielerlotterie

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