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
MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten
Die in MySQL integrierte Datumsfunktion TIMESTAMP...
Analyse der CentOS6-Methode zum Bereitstellen von Kafka-Projekten mithilfe von Docker
In diesem Artikel wird beschrieben, wie Sie Docke...
So verwenden Sie Node zum Implementieren des statischen Datei-Cachings
Inhaltsverzeichnis Cache Klassifizierung des Cach...
Vant Uploader implementiert die Drag-and-Drop-Funktion zum Hochladen von Bildern (als Cover festlegen)
Das Wirkungsdiagramm sieht wie folgt aus: <!DO...
So lösen Sie das Problem, dass das Projekt in Eclipse nicht zu Tomcat hinzugefügt werden kann
1. Klicken Sie mit der rechten Maustaste auf das ...
Beispiel für die Implementierung eines Skeleton-Bildschirms mit Vue
Inhaltsverzeichnis Verwendung des Skelettbildschi...
Lösung für das Problem, dass Flash-Animationen auf Webseiten nicht angezeigt werden
<br />Die Lösungsschritte sind wie folgt: St...
VMware vSAN - Zusammenfassung der ersten Schritte
1. Hintergrund 1. Stellen Sie kurz den Shared Sto...
CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]
CSS-Schreibreihenfolge 1. Positionsattribute (Pos...
Beginnen Sie CSS-Pseudoklassennamen nicht mit Zahlen
Wenn Neulinge Div+CSS entwickeln, müssen sie die ...
Fallstudie: Ajax responseText analysiert JSON-Daten
Lösen Sie das Problem, dass der vom Server nach d...
Einige Probleme, die bei der Installation von MySQL auftreten können
Frage 1: Wenn Sie während der Installation „net s...
mysql erstellt Root-Benutzer und normale Benutzer sowie Änderungs- und Löschfunktionen
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Detaillierte Erläuterung des Fehlerproblems der Case-When-Anweisung
Vorwort In der MySQL-Datenbank verwenden wir manc...
Beschreibung der Grenzen und Bereiche zwischen MySQL
MySQL zwischen Grenzbereich Der Bereich zwischen ...