CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen

CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen

Hintergrund

Bevor wir mit dem Artikel beginnen, wollen wir kurz klären, was賽博朋克und was賽博朋克2077 ist.

Cyberpunk ist eine Kombination aus „Kybernetik, Neuromechanik“ und „Punk“. Der Hintergrund basiert hauptsächlich auf der „Kombination von Low-End-Leben und High-End-Technologie“. Es verfügt über fortschrittliche Wissenschaft und Technologie und steht im Gegensatz zu einer sozialen Struktur, die bis zu einem gewissen Grad zusammengebrochen ist. Es verfügt über eine Vielzahl visueller Effekte, wie Neonlichter auf den Straßen, ikonische Straßenwerbung und Hochhäuser usw. Die Farben sind normalerweise Schwarz, Lila, Grün, Blau und Rot. Darunter ist „Träumen Androiden von elektrischen Schafen?“ von Philip K. Dick. 》 ist das beliebteste und der Roman wurde auch für den Film „Blade Runner“ adaptiert. Generell spiegelt das Hauptthema des Cyberpunk-Stils den scharfen Kontrast zwischen der hochentwickelten technologischen menschlichen Zivilisation und den zerbrechlichen und winzigen menschlichen Individuen wider. Gleichzeitig sind darin Widersprüche wie Außen und Innen, Stahl und Fleisch, Vergangenheit und Zukunft, Realität und Illusion miteinander verflochten.

《賽博朋克2077》 ist ein Action-Rollenspiel, das am 2020年12月10日auf den wichtigsten Gaming-Plattformen erscheint. Die Geschichte spielt in Night City, wo Machtveränderungen und Körpermodifikationen ständige Themen sind. Die Spieler übernehmen die Rolle von V , einem ehrgeizigen Söldner auf der Suche nach einem einzigartigen Implantat – dem Schlüssel zur Unsterblichkeit. Es hat mit seiner freien Erkundung, der hohen Steuerbarkeit und den atemberaubenden visuellen Effekten eine große Anzahl von Spielern angezogen. Mir gefällt der Designstil 2077 sehr gut, daher wird in diesem Artikel hauptsächlich 2077 als Beispiel verwendet und die Effekte der Cyberpunk-Stilelemente werden anhand mehrerer Beispiele nacheinander realisiert.

erreichen

Hoher Kontrast

Werfen wir zunächst einen Blick auf die Homepage 2077 Die Seite ist hauptsächlich in auffälligem明黃色gehalten und verwendet kleine Bereiche aus kontrastierenden淡藍色und玫紅色Blöcken als Verzierung. Der Text und die Zeilenränder sind純黑色. Dieser Schritt ist sehr einfach umzusetzen. Wenn wir eine Seite im Cyberpunk-Stil implementieren, können wir黑、紫、綠、藍、紅als Hauptfarben verwenden und dann ihre Kontrastfarben als Schaltflächen und Texteingabefelder verwenden, um eine starke visuelle Wirkung zu erzielen.

Schaltfläche im Glitch-Stil

Der Glitch-Effekt ist ein Absturzeffekt des Anzeigegeräts, der häufig auf der offiziellen Website 2077 verwendet wird. Lassen Sie uns zunächst den Glitch-Effekt implementieren, wenn über button hover wird. 

<button>Jetzt beitreten</button>

Der Glitch-Effekt wird hauptsächlich durch clip-path: inset und Animation erzielt. Verwenden Sie button -Pseudoelement ::after um mehrere Slices --slice Variablen dafür zu definieren, und wechseln Sie die Positionen der Slices durch Animation, um den Schütteleffekt zu erzielen. Das clip-path -Attribut verwendet Clipping, um den anzeigbaren Bereich des Elements zu erstellen. Der Teil innerhalb des Bereichs wird angezeigt, und der Teil außerhalb des Bereichs wird ausgeblendet. inset() wird verwendet, um ein Rechteck zu definieren. Es können 5 Parameter übergeben werden, die top , right , bottom und left Schnittpositionen sowie round und radius (optional, für abgerundete Ecken) entsprechen. Die grundlegende Syntax lautet wie folgt:

Einschub (<Längenprozentsatz>{1,4} [ runden <Randradius> ]? )
Clip-Pfad: Einschub (2em 3em 2em 1em rund 2em);

Vollständige Implementierung:

Schaltfläche, Schaltfläche::nach {
  Breite: 300px;
  Höhe: 86px;
  Schriftgröße: 40px;
  Hintergrund: linearer Farbverlauf (45 Grad, transparent 5 %, #FF013C 5 %);
  Rand: 0;
  Farbe: #fff;
  Buchstabenabstand: 3px;
  Zeilenhöhe: 88px;
  Kastenschatten: 6px 0px 0px #00E6F6;
  Umriss: transparent;
  Position: relativ;
}
button::nach {
  --slice-0: Einschub (50 % 50 % 50 % 50 %);
  --slice-1: Einschub (80 % -6px 0 0);
  --slice-2: Einschub (50 % -6px 30 % 0);
  --slice-3: Einschub (10 % -6px 85 % 0);
  --slice-4: Einschub (40 % -6px 43 % 0);
  --slice-5: Einschub (80 % -6px 5 % 0);
  Inhalt: „Jetzt beitreten“;
  Anzeige: Block;
  Position: absolut;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Hintergrund: linearer Farbverlauf (45 Grad, transparent 3 %, #00E6F6 3 %, #00E6F6 5 %, #FF013C 5 %);
  Textschatten: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  Clip-Pfad: var(--slice-0);
}
Schaltfläche:Hover::nach {
  Animation: 1-Sekunden-Störung;
  Animations-Timing-Funktion: Schritte (2, Ende);
}
@Keyframes-Fehler {
  0 % { Clip-Pfad: var(--slice-1); transformieren: übersetzen(-20px, -10px); }
  10 % { Clip-Pfad: var(--slice-3); transformieren: übersetzen(10px, 10px); }
  20 % { Clip-Pfad: var(--slice-1); transformieren: übersetzen(-10px, 10px); }
  30 % { Clip-Pfad: var(--slice-3); transform: übersetzen(0px, 5px); }
  40 % { Clip-Pfad: var(--slice-2); transform: übersetzen(-5px, 0px); }
  50 % { Clip-Pfad: var(--slice-3); transform: übersetzen(5px, 0px); }
  60 % { Clip-Pfad: var(--slice-4); transform: übersetzen(5px, 10px); }
  70 % { Clip-Pfad: var(--slice-2); transform: übersetzen(-10px, 10px); }
  80 % { Clip-Pfad: var(--slice-5); Transformieren: Übersetzen(20px, -10px); }
  90 % { Clip-Pfad: var(--slice-1); transform: übersetzen(-10px, 0px); }
  100 % { Clip-Pfad: var(--slice-1); transformieren: übersetzen(0); }
}

Bilder im Glitch-Stil

Der Glitch-Effekt kann auch auf Medienanzeigen wie Text, Bilder und Videos angewendet werden, um eine vollkommen technologische Atmosphäre zu erzeugen. In diesem Abschnitt sehen wir uns an, wie Sie einen Bildanzeigeeffekt im Glitch-Stil erzielen.

.glitch ist der Hauptcontainer zur Anzeige des Bildes. Sein untergeordnetes Element glitch__item wird zur Darstellung der Fehlerleiste verwendet, die dem Pseudoelement ::after im obigen Beispiel ähnelt.

<div Klasse="Fehler">
  <div Klasse="glitch__item"></div>
  <!-- ... -->
  <div Klasse="glitch__item"></div>
</div>

Die Implementierungsideen für Bilder und Schaltflächen im Glitch-Stil sind grundsätzlich ähnlich, aber dieses Mal wird zur Implementierung clip-path: polygon verwendet. polygon ist eine Methode zum Zuschneiden von Polygonen, und jedes Wertepaar stellt die Koordinaten des zuzuschneidenden Elements dar. background-blend-mode definiert den Mischmodus der Hintergrundebene. Aufgrund der begrenzten Länge des Artikels zeigt der folgende Code nur die Animation eines Verwerfungsbalkens. Ein vollständiges Beispiel finden Sie unter dem entsprechenden Link am Ende des Artikels 🔗

:Wurzel {
  --Lücke-horizontal: 10px;
  --Lücke-vertikal: 5px;
  --Zeit-Animation: 4s;
  --Verzögerung-Animation: 2 s;
  --blend-mode-1: keine;
  --blend-color-1: transparent;
}
.glitch {
  Position: relativ;
}
.glitch .glitch__item {
  Hintergrund: URL("banner.png") keine Wiederholung 50 % 50 %/Cover;
  Höhe: 100%;
  Breite: 100 %;
  oben: 0;
  links: 0;
  Position: absolut;
}
.glitch .glitch__item:nth-child(1) {
  Hintergrundfarbe: var(--blend-color-1);
  Hintergrund-Mischmodus: var(--blend-mode-1);
  Animationsdauer: var(--time-anim);
  Animationsverzögerung: var(--delay-anim);
  Animations-Timing-Funktion: linear;
  Anzahl der Animationsiterationen: unendlich;
  Animationsname: Glitch-Anim-1;
}
@keyframes glitch-anim-1 {
  0% {
    Deckkraft: 1;
    transformieren: übersetzen3d(var(--gap-horizontal), 0, 0);
    Clip-Pfad: Polygon (0 2 %, 100 % 2 %, 100 % 5 %, 0 5 %);
  }
  2 % { Clip-Pfad: Polygon (0 15 %, 100 % 15 %, 100 % 15 %, 0 15 %); }
  4 % { Clip-Pfad: Polygon (0 10 %, 100 % 10 %, 100 % 20 %, 0 20 %); }
  6 % { Clip-Pfad: Polygon (0 1 %, 100 % 1 %, 100 % 2 %, 0 2 %); }
  8 % { Clip-Pfad: Polygon (0 33 %, 100 % 33 %, 100 % 33 %, 0 33 %); }
  10 % { Clip-Pfad: Polygon (0 44 %, 100 % 44 %, 100 % 44 %, 0 44 %); }
  12 % { Clip-Pfad: Polygon (0 50 %, 100 % 50 %, 100 % 20 %, 0 20 %); }
  14 % { Clip-Pfad: Polygon (0 70 %, 100 % 70 %, 100 % 70 %, 0 70 %); }
  16 % { Clip-Pfad: Polygon (0 80 %, 100 % 80 %, 100 % 80 %, 0 80 %); }
  18 % { Clip-Pfad: Polygon (0 50 %, 100 % 50 %, 100 % 55 %, 0 55 %);
  20 % { Clip-Pfad: Polygon (0 70 %, 100 % 70 %, 100 % 80 %, 0 80 %); }
  21,9 %
    Deckkraft: 1;
    transformieren: übersetzen3d(var(--gap-horizontal), 0, 0);
  }
  22 %, 100 % {
    Deckkraft: 0;
    transformieren: übersetzen3d(0, 0, 0);
    Clip-Pfad: Polygon (0 0, 0 0, 0 0, 0 0);
  }
}

Neon-Elemente

In Cyberpunk-Szenen, wie etwa in den Filmen „Blade Runner“ und „Case“, sowie den Spielen „Watch Dogs“ und „Cyberpunk 2077“, finden sich viele neon Elemente, sei es in verlassenen Gebäuden 🏠 oder im geschäftigen Kabukicho ⛩️ . Wir können auch viele Neonelemente verwenden, um die Seite zu dekorieren, wie Seitentitel, Schaltflächen, Formularränder usw., die alle Neoneffekte verwenden können. Das Folgende ist ein kurzes Beispiel für die Implementierung von Neontext:

.neon und .flux sind zwei Textträger, die mit unterschiedlichen Neoneffekt-Stilen und Animationen angewendet werden.

<div Klasse="neon">CYBER</div>
<div class="flux">PUNK</div>

Der Neoneffekt von Text wird hauptsächlich durch text-shadow erzielt, und der Blinkeffekt wird auch durch Hinzufügen einer text-shadow mit einer Farbe erzielt, die dem Text nahe kommt. Das .neon Element wird mit ease-in-out Bewegungskurve angewendet, und das .flux Element wird mit linear Bewegungskurve angewendet. Können Sie den Unterschied zwischen den beiden erkennen? 😂

.neon {
  Textschatten: 0 0 3vw #F4BD0A;
  Animation: Neon 2s, unendliches Ein- und Ausblenden;
}
.Fluss {
  Textschatten: 0 0 3vw #179E05;
  Animation: Fluss 2 s linear unendlich;
}
@keyframes neon {
  0 %, 100 % {
    Textschatten: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    Farbe: #FFFC00;
  }
  50 % {
    Textschatten: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    Farbe: #806914;
  }
}
@keyframes Fluss {
  0 %, 100 % {
    Textschatten: 0 0 1vw #10ff4c, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    Farbe: #03C03C;
  }
  50 % {
    Textschatten: 0 0 .5vw #024218, 0 0 1.5vw #024713, 0 0 5vw #023812, 0 0 5vw #012707, 0 0 .2vw #022201, .5vw .5vw .1vw #011a06;
    Farbe: #179E05;
  }
}

Um dem Text ein neonfarbeneres Aussehen zu verleihen, wird im obigen Beispiel die Schriftart neon verwendet: https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf

Unregelmäßiges Textfeld

In Cyberpunk 2077 können Sie sehen, dass viele Textanzeigefelder diese unregelmäßige Form haben. Ist das nicht cool? In diesem Teil wird erläutert, wie Sie ein Textfeld 2077 Stil implementieren.

3 Textfelder oben bestehen jeweils aus 3 p Tags. Die Klasse .inverse stellt einen invertierten Hintergrund dar .dotted erzeugt einen gepunkteten Hintergrund.

<p class="cyberpunk">Der klassische Cyberpunk-Charakter ist der marginalisierte und entfremdete Einzelgänger. Sie leben am Rand der Gesellschaft, in einer dystopischen Zukunft, in der das tägliche Leben von radikalen technologischen Veränderungen, einer weltweit allgegenwärtigen Computerinformation und invasiven menschlichen Eingriffen beeinflusst wird. </p>
<p class="cyberpunk inverse">Der klassische Cyberpunk-Charakter ist der marginalisierte und entfremdete Einzelgänger. Sie leben am Rand der Gesellschaft, in einer dystopischen Zukunft, in der das tägliche Leben von radikalen technologischen Veränderungen, einer weltweit allgegenwärtigen Computerinformation und invasiven menschlichen Eingriffen beeinflusst wird. </p>
<p class="cyberpunk inverse dotted">Der klassische Cyberpunk-Charakter ist der marginalisierte und entfremdete Einzelgänger. Sie leben am Rand der Gesellschaft, in einer dystopischen Zukunft, in der das tägliche Leben von radikalen technologischen Veränderungen, einer weltweit allgegenwärtigen Computerinformation und invasiven menschlichen Eingriffen beeinflusst wird. </p>

Die unregelmäßige Form des Textfelds wird hauptsächlich durch clip-path: polygon realisiert. Durch Ausschneiden der folgenden Koordinaten kann das Polygon im Stil 2077 realisiert werden.

Clip-Pfad: Polygon(
  0px 25px,
  26px 0px,
  berechnen (60 % – 25 Pixel) 0px,
  60% 25px, 
  100 % 25 Pixel, 
  100 % berechnet (100 % – 10 Pixel),
  berechnen (100 % – 15 Pixel) berechnen (100 % – 10 Pixel),
  berechnen (80 % – 10 Pixel) berechnen (100 % – 10 Pixel),
  berechnen (80 % – 15 Pixel) 100 %,
  80px berechnet (100 % – 0px),
  65px berechnet (100 % - 15px),
  0 % berechnet (100 % – 15 Pixel)
);

Vollständiger Code:

:Wurzel {
  --gelbe Farbe: #f9f002;
  --Rahmenfarbe: #8ae66e;
}
.cyberpunk {
  Polsterung: 5px;
  Position: relativ;
  Schriftgröße: 1,2rem;
  Farbe: var(--yellow-color);
  Rand: 30px durchgezogen var(--yellow-color);
  Rahmen rechts: 5px durchgezogen var(--yellow-color);
  Rahmen links: 5px durchgezogen var(--yellow-color);
  Rahmen unten: 24px durchgehend var(--yellow-color);
  Hintergrundfarbe: #000;
  Clip-Pfad: Polygon (0px 25px, 26px 0px, berechnet (60 % – 25px) 0px, 60 % 25px, 100 % 25px, 100 % berechnet (100 % – 10px), berechnet (100 % – 15px) berechnet (100 % – 10px), berechnet (80 % – 10px) berechnet (100 % – 10px), berechnet (80 % – 15px) 100 %, 80px berechnet (100 % – 0px), 65px berechnet (100 % – 15px), 0 % berechnet (100 % – 15px));
}
.cyberpunk.inverse {
  Rand: keiner;
  Polsterung: 40px 15px 30px;
  Farbe: #000;
  Hintergrundfarbe: var(--yellow-color);
  Rahmen rechts: 2px durchgezogen var(--border-color);
}
.dotted, .dotted:vorher, .dotted:nachher {
  Hintergrund: var(--yellow-color);
  Hintergrundbild: radialer Farbverlauf (#00000021 1px, transparent 0);
  Hintergrundgröße: 5px 5px;
  Hintergrundposition: -13px -3px;
}
/*Kleiner Zahlenstil auf der rechten Seite des Textfelds*/
.cyberpunk:vor {
  Inhalt: "P-14";
  Anzeige: Block;
  Position: absolut;
  unten: -12px;
  rechts: 25px;
  Polsterung: 2px 2px 0px 2px;
  Schriftgröße: 0,6rem;
  Zeilenhöhe: 0,6rem;
  Farbe: #000;
  Hintergrundfarbe: var(--yellow-color);
  Rahmen links: 2px durchgezogen var(--border-color);
}
.cyberpunk.inverse:vor {
  Inhalt: "T-71";
  rechts: 90px;
  unten: 9px;
}
.cyberpunk.inverse:vorher, .cyberpunk:vorher {
  Hintergrundfarbe: #000;
  Farbe: var(--yellow-color);
}

Coole Formelemente

Auch die Form von 2077 ist sehr markant. Die Elemente input und textarea des Eingabefelds können auch clip-path: polygon verwenden, um unregelmäßige Formen zu erzielen, und das Optionsfeld und das Multiple-Choice-Feld können mit den Pseudoelementen :before und :after dekoriert werden. 

<input Klasse="Cyberpunk" Typ="Text" Platzhalter="Eingabe Eingabefeld" />
<textarea class="cyberpunk" placeholder="textarea text box"></textarea>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" />Radio 1</label>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" />Radiobox 2</label><br />
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" />Multiple-Choice-Feld</label><br />

Die vollständige Implementierung sieht wie folgt aus:

Eingabe[Typ="text"].cyberpunk, Textbereich.cyberpunk {
  Breite: berechnet (100 % – 30 Pixel);
  Rand: 30px durchgezogen #000;
  Rahmen links: 5px durchgezogen #000;
  Rand rechts: 5px durchgezogen #000;
  Rahmen unten: 15px durchgezogen #000;
  Clip-Pfad: Polygon (0px 25px, 26px 0px, berechnet (60 % – 25px) 0px, 60 % 25px, 100 % 25px, 100 % berechnet (100 % – 10px), berechnet (100 % – 15px) berechnet (100 % – 10px), berechnet (80 % – 10px) berechnet (100 % – 10px), berechnet (80 % – 15px) berechnet (100 % – 0px), 10px berechnet (100 % – 0px), 0 % berechnet (100 % – 10px));
  Polsterung: 12px;
}
Eingabe[Typ="Radio"].Cyberpunk {
  Randradius: 15 %;
  Z-Index: 100;
  Höhe: 14px;
  Breite: 20px;
  Aussehen: keines;
  Gliederung: keine;
  Hintergrundfarbe: #000;
  Cursor: Zeiger;
  Position: relativ;
  Rand: 0px;
  Anzeige: Inline-Block;
}
Eingabe[Typ="Radio"].Cyberpunk:nach {
  Inhalt: "";
  Anzeige: Block;
  Breite: 8px;
  Höhe: 6px;
  Hintergrundfarbe: var(--yellow-color);
  Position: absolut;
  oben: 2px;
  links: 2px;
  Übergang: Hintergrund 0,3 s, links 0,3 s;
}
Eingabe[Typ="Radio"].cyberpunk:geprüft:nach {
  Hintergrundfarbe: var(--border-color);
  links: 10px;
}
Eingabe[Typ="Checkbox"].Cyberpunk {
  Randradius: 15 %;
  Z-Index: 100;
  Höhe: 20px;
  Breite: 20px;
  Aussehen: keines;
  Gliederung: keine;
  Hintergrundfarbe: #000;
  Cursor: Zeiger;
  Position: relativ;
  Rand: 0px;
  Rand unten: -3px;
  Anzeige: Inline-Block;
}
Eingabe[Typ="Checkbox"].cyberpunk:vor {
  Inhalt: "";
  Anzeige: Block;
  Breite: 8px;
  Höhe: 8px;
  Rand: 2px durchgezogen var(--yellow-color);
  Rahmen oben: 2px durchgehend transparent;
  Randradius: 50 %;
  Position: absolut;
  oben: 5px;
  links: 4px;
}
Eingabe[Typ="Checkbox"].cyberpunk:nach {
  Inhalt: "";
  Anzeige: Block;
  Breite: 2px;
  Höhe: 7px;
  Hintergrundfarbe: var(--yellow-color);
  Position: absolut;
  oben: 3px;
  links: 9px;
}
Eingabe[Typ="Checkbox"].cyberpunk:geprüft:vorher {
  Rahmenfarbe: var(--border-color);
  Farbe des oberen Rahmens: transparent;
}
Eingabe[Typ="Checkbox"].cyberpunk:geprüft:nach {
  Hintergrundfarbe: var(--border-color);
}

Titel und Text

Bei der Textanzeige von Webseiten im Cyberpunk-Stil werden häufig輸入光標閃爍Blinkstil und故障風格wie in der folgenden Abbildung verwendet. Wir können h1 - h5 -Titeln, hr und anderen Elementen gleichmäßig Unterstreichungsdekorationen und Fehleranimationseffekte hinzufügen. Sehen wir uns an, wie man solche Texteffekte erzielt. 

<h1 class="cyberpunk">H1-Titel</h1>
<h1 class="cyberpunk glitched">H1-Titel fehlerhaft</h1>
h1.cyberpunk {
  Position: relativ;
}
h1.cyberpunk:vor {
  Inhalt: "";
  Anzeige: Block;
  Position: absolut;
  unten: 0px;
  links: 2px;
  Breite: 100 %;
  Höhe: 10px;
  Hintergrundfarbe: #000;
  Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 100 % 6px, 85px 6px, 80px 10px, 0px 10px);
}
h1.cyberpunk.glitched {
  Animationsname: fehlerhaft;
  Animationsdauer: berechnet (.9s * 1.4);
  Anzahl der Animationsiterationen: unendlich;
  Animations-Timing-Funktion: linear;
}
@Keyframes fehlerhaft {
  0 % { links: -4px; transform: schräg (-20 Grad); }
  11 % { links: 2px; transform: schräg (0 Grad); }
  50 % { transform: skew(0 Grad); }
  51 % { transform: skew(10deg); }
  60 % { transform: skew(0 Grad); }
  100 % { transform: skew(0 Grad); }
}
h1.cyberpunk.glitched:vor {
  Animationsname: vor dem Fehler;
  Animationsdauer: berechnet (.9s * 2);
  Anzahl der Animationsiterationen: unendlich;
  Animations-Timing-Funktion: linear;
}
@keyframes vor dem Glitch {
  0% {
    links: -4px;
    Transformieren: Schrägstellung (-20 Grad);
    Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 100 % 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  11% {
    links: 2px;
    transformieren: schief (0 Grad);
    Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 100 % 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  50 % {
    transformieren: schief (0 Grad);
    Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 100 % 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  51 % {
    transformieren: schief (0 Grad);
    Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 40 % 5px, berechnet (40 % – 30px) 0px, berechnet (40 % + 30px) 0px, berechnet (45 % – 15px) 5px, 100 % 5px, 100 % 6px, berechnet (45 % – 14px) 6px, berechnet (40 % + 29px) 1px, berechnet (40 % – 29px) 1px, berechnet (40 % + 1px) 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  60 % {
    transformieren: schräg(0 Grad);
    Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 100 % 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  100 % {
    transformieren: schräg(0 Grad);
    Clip-Pfad: Polygon (0px 0px, 85px 0px, 90px 5px, 100 % 5px, 100 % 6px, 85px 6px, 80px 10px, 0px 10px);
  }
}

Metall Textur

Um den technologischen Eindruck hervorzuheben, weisen auf der賽博朋克2077 Webseite viele Seitenelemente eine metallische Textur auf, beispielsweise der Hintergrund modaler Popup-Fenster, die Ränder von Textanzeigeblöcken usw. In diesem Abschnitt erfahren Sie, wie Sie einen einfachen Hintergrund aus Metallmaterial erzielen.

Den vier button werden metallische Hintergrundfarbeffekte in金、銀、銅、鈦hinzugefügt.

<button class="gold">Gold</button>
<button class="silver">Silber </button>
<button class="bronze">Bronze</button>
<button class="titanium">Titan </button>

Um den metallischen Glanzeffekt zu erzielen, werden vor allem folgende css Eigenschaften genutzt:

  • box-shadow : Fügen Sie Schatten hinzu, um die dreidimensionale Textur hervorzuheben.
  • background: radial-gradient : radialer Farbverlauf, der einen unteren Schatten hinzufügt.
  • background: linear-gradient : Linearer Farbverlauf, Hintergrund in Primärfarbe.
  • background: conic-gradient : Konischer Farbverlauf, der einen reflektierenden Metalleffekt erzeugt.

Fügen Sie die obigen drei Farbverläufe nacheinander hinzu, wie unten gezeigt:

Beispiel eines vollständigen Implementierungscodes:

Taste {
  Polsterung: 2px;
  Breite: 250px;
  Höhe: 250px;
  Rahmenradius: 12px;
  Rand: Rille 1px transparent;
}
.Gold {
  Box-Schatten: Einschub 0 0 0 1px #eedc00, Einschub 0 1px 2px rgba(255, 255, 255, 0,5), Einschub 0 -1px 2px rgba(0, 0, 0, 0,5);
  background: conic-gradient(#edc800, #e3b600, #f3cf00, #ffe800, #ffe900, #ffeb00, #ffe000, #ebc500, #e0b100, #f1cc00, #fcdc00, #d4c005fb, #fad900, #eec200, #e7b900, #f7d300, #ffe800, #ffe300, #f5d100, #e6b900, #e3b600, #f4d000, #ffe400, #ebc600, #e3b600, #f6d500, #ffe900, #ffe90a, #edc800) content-box, linear-gradient(#f6d600, #f6d600) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}
.silber {
  Box-Schatten: Einschub 0 0 0 1px #c9c9c9, Einschub 0 1px 2px rgba(255, 255, 255, 0,5), Einschub 0 -1px 2px rgba(0, 0, 0, 0,5);
  background: conic-gradient(#d7d7d7, #c3c3c3, #cccccc, #c6c6c6, #d3d3d3, #d8d8d8, #d5d5d5, #d8d8d8, #d3d3d3, #c5c5c5, #c0c0c0, #bfbfbf, #d0d0d0, #d9d9d9, #d1d1d1, #c5c5c5, #c8c8c8, #d7d7d7, #d5d5d5, #cdcdcd, #c4c4c4, #d9d9d9, #cecece, #c5c5c5, #c5c5c5, #cdcdcd, #d8d8d8, #d9d9d9, #d7d7d7) content-box, linear-gradient(#d4d4d4, #d4d4d4) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}
.bronze {
  Box-Schatten: Einschub 0 0 0 1px #bc7e6b, Einschub 0 1px 2px rgba(255, 255, 255, 0,5), Einschub 0 -1px 2px rgba(0, 0, 0, 0,5);
  Hintergrund: Conic-Gradient ( #D95641, #B14439, #B2453A, #D25645, #D56847, #D05441, #B85137, #B2453A, #C34F40, #DF4647, #A944, #A943, #C944, #A942, #A943, #C94943, #A942, #A94, #A938, #C9443, #A942, #A942, #C944, #A942, #A94, #A. 43A, #D1564E, #AB4338, #BB4A3C, #DC5843, #B94839, #AA4237, #C24E42, #CE523F, #AB4338, #DD5944, #CA4D33, #AB4338, #CB503E, # #), # #CB503, # #), # #CB503, #), # #CB503, #), # #CB503, #), # #CB503, # #), # #CB503, # #), # #CB503, # #), # #CB503, #), # #cb503, # #) 36, #ad3b36) Padding-Box, Radialgradient (RGBA (120, 120, 120, 0,9), RGBA (120, 120, 120, 0) 70%) 50% Bottom/80% 0,46875Em No-Repeat Border-Box;
}
.Titanium {
  Box-Schatten: Einschub 0 0 0 1px #c7aca0, Einschub 0 1px 2px rgba(255, 255, 255, 0,5), Einschub 0 -1px 2px rgba(0, 0, 0, 0,5);
  background: conic-gradient(#e6c9bf, #d2b5aa, #cbaea3, #d4b5ab, #e5c3bd, #d9c0b4, #d9bcb1, #c5a399, #e3c6bc, #e7cac0, #dec0b5, #d3b6ab, #cfada1, #d4b6ac, #e2c6c0, #e2c6c0, #d2b1a6, #d2b1a6, #d1b4a9, #e1c4ba, #e5c9be, #dec1b6, #d3b6ab, #ceb0a6, #cfada3, #d2b5aa, #dabdb2, #e5c9be, #e6c9bf) content-box, linear-gradient(#e5c9be, #e5c9be) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}

Durch die Kombination 3 Farbverläufe können Sie komplexere und schönere Metallmaterialeffekte erzeugen. Der vollständige Code kann unter dem entsprechenden Link am Ende des Artikels in der Vorschau angezeigt werden 🔗 .

andere

Welche weiteren Stilelemente des Cyberpunk sind neben den oben genannten Aspekten lohnenswert? Die folgenden Punkte können auch den technologischen künstlerischen Sinn und das Benutzererlebnis der Webseite verbessern. Haben Sie bessere Ideen? 😊

  • Verwenden Sie flache, pixelige Schriftarten;
  • Hochtechnologische Seitenladeanimation, Bildlaufanimation und Bildlaufleiste;
  • Der gemischte Text in Chinesisch/Japanisch/Englisch unterstreicht die kulturelle Integration der zukünftigen Welt.
  • Um den perspektivischen Effekt basierend auf der Mausbewegung zu verstärken, können Sie meinen anderen Artikel 《如何在CSS中映射的鼠標位置，并實現通過鼠標移動控制頁面元素效果》 lesen.
  • ...

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 erzielen. Weitere relevante CSS-Inhalte zu Cyberpunk 2077 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite

>>:  Beispielcode mit Vue-Router in HTML

Artikel empfehlen

So kommunizieren Sie zwischen dem WIN10-System und der internen Container-IP von Docker

1. Nach der Installation der Windows-Version von ...

Gründe und Lösungen für das Versagen des React-Ereignisdrosselungseffekts

Inhaltsverzeichnis Das Problem hierbei ist: Lösun...

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

Dieser Artikel enthält hauptsächlich Lösungen für...

Wie stellt MySQL die Datenintegrität sicher?

Die Bedeutung von Datenkonsistenz und -integrität...

Eine kurze Diskussion über die alternative Methode von $refs in vue2 in der kombinierten API von vue3

Wenn Sie Erfahrung in der Vue2-Projektentwicklung...

Detaillierte Erläuterung der Implementierung und Anwendungsszenarien des Vue-Filters

1. Kurze Einführung Vue.js ermöglicht es Ihnen, I...

Acht Implementierungslösungen für domänenübergreifendes JS-Frontend

Inhaltsverzeichnis 1. JSONP domänenübergreifend 2...

Über Vue, um wiederholte Eingabeaufforderungen beim Aktualisieren der Seite nach Ablauf des Tokens zu vermeiden

Wenn das Token abläuft, aktualisieren Sie die Sei...

Docker-Pull-Image und Tag-Vorgang Pull | Tag

Ich habe den Quellcode des Fabric-Projekts noch e...

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Manchmal erstellen wir einen Dateiserver über ngi...

Detaillierte Erklärung zur Verwendung des HTML-Webpack-Plugins

Kürzlich habe ich html-webapck-plugin zum ersten ...

Detaillierte Erläuterung der Überwachung von Spaltenüberläufen ohne Primärschlüssel in MySQL-Tabellen

Heute bin ich wieder in die Falle getappt. Ich bi...

Informationen zur Verwendung der Vue v-on-Direktive

Inhaltsverzeichnis 1. Auf Ereignisse achten 2. Üb...

Die neuesten 36 hochwertigen kostenlosen englischen Schriftarten freigegeben

01. Unendlichkeit Schriftart herunterladen 02. Ban...

So zeigen Sie allgemeine Symbole auf dem Desktop in Windows Server 2012 an oder verbergen sie

Windows Server 2012 und Windows Server 2008 unter...