HTML+CSS zum Erstellen des Spezialeffektcodes für das Blut-Sharingan und das Samsara-Auge
|
Das Ergebnis (vollständiger Code unten):
Die Implementierung ist nicht schwierig, es gibt jedoch viel wiederholten Code. Umsetzung (Sie können sie Schritt für Schritt nachvollziehen): 1. Definieren Sie zunächst die grundlegenden Tags:
<!-- Blutige Augen-->
<div Klasse="zuo">
<!-- Der schwarze Fleck in der Mitte des Auges-->
<div Klasse="zuoZong">
<!-- Der Kreis, in dem sich die drei Magatama befinden-->
<div Klasse="zuoYu">
<!-- Drei Magatama-->
<span class="yu"></span>
<span class="yu"></span>
<span class="yu"></span>
</div>
</div>
</div>
<!-- Samsara-Auge-->
<div Klasse="Sie">
<!-- Der schwarze Fleck in der Mitte des Auges-->
<div Klasse="dian"></div>
<!-- 3 Zyklen-->
<div Klasse="duYu">
<span class="quan" style="--r:2;"></span>
<span class="quan" style="--r:3;"></span>
<span class="quan" style="--r:4;"></span>
</div>
</div>2. Definieren Sie die grundlegenden CSS-Stile für das linke und rechte Auge:
.zuo , .du{
Breite: 250px;
Höhe: 120px;
Hintergrundfarbe: rgb(255, 255, 255);
Rahmen unten: 5px durchgezogenes RGB (70, 70, 70);
Überlauf: versteckt;
Position: relativ;
} border-bottom: 5px solid rgb(70, 70, 70); ergibt einen grauen Hintergrund. 3. Beginnen Sie mit der Definition des grundlegenden Stils des Sharingan:
.zuo{
transformieren: übersetzenX(-135px);
Rahmenradius: 0 120px 0 120px;
Box-Shadow: Einschub 3px 2px 3px rgba(17, 17, 17, 0,8);
} transform: translateX(-135px); Nach links verschieben, um die Augen zu trennen. 4. Stellen Sie die Breite und Höhe des Augapfels usw. ein:
.zuo::nach{
Inhalt: '';
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Breite: 95px;
Höhe: 95px;
Randradius: 50 %;
Rand: 2px durchgezogen #000;
Animation: Farbe 2s linear vorwärts;
}
@keyframes Farbe{
0 %, 30 % {
Hintergrundfarbe: rgb(0, 0, 0);
}
100 %{
Hintergrundfarbe: rgb(255, 4, 4);
}
} Position: absolut; absolute Positionierung 5. Setzen Sie den schwarzen Punkt mit etwas Positionierung und Größe in die Mitte des Augapfels und stellen Sie dann die Animation so ein, dass er langsam wächst:
.zuoZong{
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Breite: 0px;
Höhe: 0px;
Randradius: 50 %;
Hintergrundfarbe: rgb(0, 0, 0);
Z-Index: 1;
Animation: da 3s linear vorwärts;
}
@keyframes da{
100 %{
Breite: 15px;
Höhe: 15px;
}
}6. Legen Sie den Kreis dort fest, wo sich die drei Magatama befinden, und stellen Sie die Animation so ein, dass er angezeigt und rotiert:
.zuoYu{
Position: absolut;
oben: -25px;
links: -25px;
unten: -25px;
rechts: -25px;
Randradius: 50 %;
Rand: 2px durchgezogen rgb(0, 0, 0);
Animation: Zhuan 2 s linear 2 s vorwärts;
Deckkraft: 0;
}
@keyframes zhuan{
100 %{
Deckkraft: 1;
transformieren: drehen (720 Grad);
}
} Position: absolut; 7. Um drei Magatama zu erstellen, zeichnen Sie zuerst einen Kreis und verwenden Sie dann die doppelte Pseudoklasse, um einen Bogen zu erstellen. Die Kombination der beiden ergibt das Magatama:
.zuoYu .yu{
Position: absolut;
Breite: 15px;
Höhe: 15px;
Randradius: 50 %;
Hintergrundfarbe: rgb(0, 0, 0);
}
.zuoYu .yu::nach{
Inhalt: '';
Position: absolut;
oben: -6px;
links: -1px;
Breite: 6px;
Höhe: 20px;
Randradius: 50 %;
Rahmen links: 6px durchgezogen rgb(0, 0, 0);
} Randradius: 50 %; 8. Legen Sie eine Animation für das Magatama fest, sodass es größer wird und sich vom Mittelpunkt zum Kreis dreht, in dem sich das Magatama befindet:
.zuoYu .yu:nth-child(1){
Animation: yu1 2 s, 2 s vorwärts;
}
@keyframes yu1{
0 %{
Deckkraft: 0;
links: 50%;
oben: 50 %;
transformieren: übersetzen (-50 %, -50 %) Skala (0,1);
}
100 %{
links: 50%;
oben: -9%;
transformieren: skalieren (1) drehen (80 Grad);
}
} links: 50%; 9. Animieren Sie auf die gleiche Weise die anderen beiden Magatama:
.zuoYu .yu:nth-child(2){
Animation: yu2 2 s, 2 s vorwärts;
}
@keyframes yu2{
0 %{
Deckkraft: 0;
links: 50%;
oben: 50 %;
transformieren: übersetzen (-50 %, -50 %), Skalierung (0,1);
}
100 %{
oben: 60 %;
links: -9%;
transformieren: skalieren (1) drehen (-60 Grad);
}
}
.zuoYu .yu:nth-child(3){
Animation: yu3 2 s, 2 s vorwärts;
}
@keyframes yu3{
0 %{
Deckkraft: 0;
rechts: 50%;
oben: 50 %;
transformieren: übersetzen (-50 %, -50 %), Skalierung (0,1);
}
100 %{
oben: 60 %;
rechts: -9%;
transformieren: skalieren (1) drehen (180 Grad);
}
}10. Setze für beide Augen einen weißen Punkt, der dem reflektierenden Effekt entspricht. Nun ist das Sharingan fertig:
.zuo::vorher,.du::vorher{
Inhalt: '';
Position: absolut;
links: 38%;
oben: 30%;
Breite: 12px;
Höhe: 12px;
Randradius: 50 %;
Hintergrundfarbe: rgb(255, 255, 255);
Z-Index: 10;
} Position: absolut; 11. Legen Sie den grundlegenden CSS-Stil des Samsara-Auges fest, derselbe wie beim Blutauge:
.Du{
transformieren: übersetzenX(135px);
Rahmenradius: 120px 0 120px 0;
Box-Schatten: Einschub -3px 2px 3px rgba(17, 17, 17, 0,8);
}12. Stellen Sie die Breite und Höhe des Augapfels usw. ein:
.Sie::nach{
Inhalt: '';
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Breite: 95px;
Höhe: 95px;
Randradius: 50 %;
Rand: 2px durchgezogen #000;
Animation: Youcolor 2s linear vorwärts;
}
@keyframes ducolor{
0 %, 30 % {
Hintergrundfarbe: rgb(0, 0, 0);
}
100 %{
Hintergrundfarbe: RGB (144, 130, 183);
}
} Position: absolut; absolute Positionierung 13. Setzen Sie den schwarzen Punkt in die Mitte des Augapfels, ähnlich wie beim Sharingan:
.dian{
Position: absolut;
oben: 50 %;
links: 50%;
Hintergrundfarbe: #000;
transformieren: übersetzen(-50 %,-50 %);
Randradius: 50 %;
Z-Index: 10;
Animation: Youda 3s linear vorwärts;
}
@keyframes duda{
0 %{
Höhe: 0px;
Breite: 0px;
}
100 %{
Höhe: 15px;
Breite: 15px;
}
}14. Legen Sie jeden Kreis des Samsara-Auges fest und stellen Sie die Animation so ein, dass er größer wird:
.duDu{
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
}
.quan{
Position: absolut;
Randradius: 50 %;
Rand: 2px durchgezogen #000;
z-Index: berechnen (1 - var (--r));
Animation: Zhi 2 s, 2 s vorwärts auslaufen;
}
@keyframes zhi{
0 %{
oben: calc(var(--r) * 1px);
links: calc(var(--r) * 1px);
rechts: calc(var(--r) * 1px);
unten: calc(var(--r) * 1px);
}
100 %{
oben: berechnen(var(--r) * -35px);
links: calc(var(--r) * -35px);
rechts: calc(var(--r) * -35px);
unten: calc(var(--r) * -35px);
Hintergrundfarbe: rgb(187, 177, 214);
}
} z-index: calc(1 - var(–r)); Berechnen Sie so, dass der erste Kreis in der obersten Ebene angezeigt wird. Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
Körper{
Höhe: 100vh;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Hintergrundfarbe: #000;
}
.zuo , .du{
Breite: 250px;
Höhe: 120px;
Hintergrundfarbe: rgb(255, 255, 255);
Rahmen unten: 5px durchgezogenes RGB (70, 70, 70);
Überlauf: versteckt;
Position: relativ;
}
.zuo{
transformieren: übersetzenX(-135px);
Rahmenradius: 0 120px 0 120px;
Box-Shadow: Einschub 3px 2px 3px rgba(17, 17, 17, 0,8);
}
.zuo::nach{
Inhalt: '';
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Breite: 95px;
Höhe: 95px;
Randradius: 50 %;
Rand: 2px durchgezogen #000;
Animation: Farbe 2s linear vorwärts;
}
@keyframes Farbe{
0 %, 30 % {
Hintergrundfarbe: rgb(0, 0, 0);
}
100 %{
Hintergrundfarbe: rgb(255, 4, 4);
}
}
.zuoZong{
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Breite: 0px;
Höhe: 0px;
Randradius: 50 %;
Hintergrundfarbe: rgb(0, 0, 0);
Z-Index: 1;
Animation: da 3s linear vorwärts;
}
@keyframes da{
100 %{
Breite: 15px;
Höhe: 15px;
}
}
.zuoYu{
Position: absolut;
oben: -25px;
links: -25px;
unten: -25px;
rechts: -25px;
Randradius: 50 %;
Rand: 2px durchgezogen rgb(0, 0, 0);
Animation: Zhuan 2 s linear 2 s vorwärts;
Deckkraft: 0;
}
@keyframes zhuan{
100 %{
Deckkraft: 1;
transformieren: drehen (720 Grad);
}
}
.zuoYu .yu{
Position: absolut;
Breite: 15px;
Höhe: 15px;
Randradius: 50 %;
Hintergrundfarbe: rgb(0, 0, 0);
}
.zuoYu .yu::nach{
Inhalt: '';
Position: absolut;
oben: -6px;
links: -1px;
Breite: 6px;
Höhe: 20px;
Randradius: 50 %;
Rahmen links: 6px durchgezogen rgb(0, 0, 0);
}
.zuoYu .yu:nth-child(1){
Animation: yu1 2 s, 2 s vorwärts;
}
@keyframes yu1{
0 %{
Deckkraft: 0;
links: 50%;
oben: 50 %;
transformieren: übersetzen (-50 %, -50 %) Skala (0,1);
}
100 %{
links: 50%;
oben: -9%;
transformieren: skalieren (1) drehen (80 Grad);
}
}
.zuoYu .yu:nth-child(2){
Animation: yu2 2 s, 2 s vorwärts;
}
@keyframes yu2{
0 %{
Deckkraft: 0;
links: 50%;
oben: 50 %;
transformieren: übersetzen (-50 %, -50 %), Skalierung (0,1);
}
100 %{
oben: 60 %;
links: -9%;
transformieren: skalieren (1) drehen (-60 Grad);
}
}
.zuoYu .yu:nth-child(3){
Animation: yu3 2 s, 2 s vorwärts;
}
@keyframes yu3{
0 %{
Deckkraft: 0;
rechts: 50%;
oben: 50 %;
transformieren: übersetzen (-50 %, -50 %), Skalierung (0,1);
}
100 %{
oben: 60 %;
rechts: -9%;
transformieren: skalieren (1) drehen (180 Grad);
}
}
.zuo::vorher,.du::vorher{
Inhalt: '';
Position: absolut;
links: 38%;
oben: 30%;
Breite: 12px;
Höhe: 12px;
Randradius: 50 %;
Hintergrundfarbe: rgb(255, 255, 255);
Z-Index: 10;
}
.Du{
transformieren: übersetzenX(135px);
Rahmenradius: 120px 0 120px 0;
Box-Schatten: Einschub -3px 2px 3px rgba(17, 17, 17, 0,8);
/* Filter: Schlagschatten(8px -5px 3px rgb(216, 59, 59));
*/ }
.Sie::nach{
Inhalt: '';
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Breite: 95px;
Höhe: 95px;
Randradius: 50 %;
Rand: 2px durchgezogen #000;
Animation: Youcolor 2s linear vorwärts;
}
@keyframes ducolor{
0 %, 30 % {
Hintergrundfarbe: rgb(0, 0, 0);
}
100 %{
Hintergrundfarbe: RGB (144, 130, 183);
}
}
.dian{
Position: absolut;
oben: 50 %;
links: 50%;
Hintergrundfarbe: #000;
transformieren: übersetzen(-50 %,-50 %);
Randradius: 50 %;
Z-Index: 10;
Animation: Youda 3s linear vorwärts;
}
@keyframes duda{
0 %{
Höhe: 0px;
Breite: 0px;
}
100 %{
Höhe: 15px;
Breite: 15px;
}
}
.duDu{
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
}
.quan{
Position: absolut;
Randradius: 50 %;
Rand: 2px durchgezogen #000;
z-Index: berechnen (1 - var (--r));
Animation: Zhi 2 s, 2 s vorwärts auslaufen;
}
@keyframes zhi{
0 %{
oben: calc(var(--r) * 1px);
links: calc(var(--r) * 1px);
rechts: calc(var(--r) * 1px);
unten: calc(var(--r) * 1px);
}
100 %{
oben: berechnen(var(--r) * -35px);
links: calc(var(--r) * -35px);
rechts: calc(var(--r) * -35px);
unten: calc(var(--r) * -35px);
Hintergrundfarbe: rgb(187, 177, 214);
}
}
</Stil>
</Kopf>
<Text>
<!-- Blutige Augen-->
<div Klasse="zuo">
<!-- Der schwarze Fleck in der Mitte des Auges-->
<div Klasse="zuoZong">
<!-- Der Kreis, in dem sich die drei Magatama befinden-->
<div Klasse="zuoYu">
<!-- Drei Magatama-->
<span class="yu"></span>
<span class="yu"></span>
<span class="yu"></span>
</div>
</div>
</div>
<!-- Samsara-Auge-->
<div Klasse="Sie">
<!-- Der schwarze Fleck in der Mitte des Auges-->
<div Klasse="dian"></div>
<!-- 3 Zyklen-->
<div Klasse="duYu">
<span class="quan" style="--r:2;"></span>
<span class="quan" style="--r:3;"></span>
<span class="quan" style="--r:4;"></span>
</div>
</div>
</body>
</html>Dies ist das Ende des Artikels über die Verwendung von HTML+CSS zum Erzielen der Spezialeffekte von Sharingan und Samsara Eye. Weitere relevante HTML-Inhalte zu Spezialeffekten von Sharingan und Samsara Eye finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: 4 Funktionen, die durch das Transform-Attribut in CSS3 implementiert werden
Artikel empfehlen
HTML+CSS+JS zur Implementierung des Spiels „Nicht auf das Whiteboard treten“
Inhaltsverzeichnis Hintergrund 1. Gedankenanalyse...
Detaillierte Analyse von HTML-Tabellen-Tags und damit verbundenen Zeilenumbruchproblemen
Was ist eine Tabelle? Eine Tabelle ist eine HTML-...
Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)
Der automatische Bildlaufeffekt der Seite kann du...
MySql-Gruppierung und zufälliges Abrufen eines Datenelements aus jeder Gruppe
Idee: Einfach erst zufällig sortieren und dann gr...
Zusammenfassung gängiger MySQL-Befehle
Festlegen des MySQL-Root-Passworts Melden Sie sic...
svg+css oder js zum Erstellen eines Tick-Animationseffekts
Mein Chef hatte mich gebeten, ein Programm zu ers...
CSS-Syntax für Tabellenränder
<br /> CSS-Syntax für Tabellenränder Zu den ...
Ist ein Design, das den Designspezifikationen entspricht, ein gutes Design?
In den letzten Jahren meiner Karriere habe ich an...
Detaillierte Schritte zur Verwendung von Redis in Docker
1. Einleitung Dieser Artikel zeigt Ihnen, wie Sie...
Beispiel für eine geplante MySQL-Datenbanksicherung
Dieser Artikel beschreibt das Beispiel eines gepl...
Detaillierte Erklärung zum Einfügen gängiger Nginx-Befehle in Shell-Skripte
1. Erstellen Sie einen Ordner zum Speichern von N...
Beispielcode für die Entwicklung einer H5-Formularseite basierend auf React-Hooks und der Konfiguration der Zarm-Komponentenbibliothek
Vor kurzem habe ich React Hooks in Kombination mi...
Beispiele für die Erstellung eines MySQL-Datenbankkontos, Autorisierung sowie Datenexport- und -importvorgänge
Dieser Artikel beschreibt Beispiele zum Erstellen...
MySQL-Indexprinzip und Analyse von Anwendungsbeispielen
Dieser Artikel veranschaulicht anhand von Beispie...
Verwendung des Fokus-innerhalb-Selektors von CSS3
Pseudoelemente und Pseudoklassen Apropos, schauen...