HTML+CSS zum Erstellen des Spezialeffektcodes für das Blut-Sharingan und das Samsara-Auge

HTML+CSS zum Erstellen des Spezialeffektcodes für das Blut-Sharingan und das Samsara-Auge

Das Ergebnis (vollständiger Code unten):

Blutauge

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.
Überlauf: Überlauf ist ausgeblendet.
Position: relativ; Relative Positionierung.

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.
border-radius: Stellen Sie den Radius der beiden Ecken so ein, dass eine Augenform entsteht.
bos-shadowL fügt dem Augenwinkel etwas Schatten hinzu.

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
oben: 50 %;
links: 50%;
Transformieren: Verschieben (-50 %, -50 %); Zentrierte Ausrichtung.
Animation: Stellen Sie die Animation so ein, dass es rot wird. vorwärts: erbt die Eigenschaften des letzten Frames.
Hintergrundfarbe: rgb(0, 0, 0); schwarz
Hintergrundfarbe: rgb(255, 4, 4); Rot.

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;
oben: -25px;
links: -25px;
unten: -25px;
rechts: -25px; Größe.
Randradius: 50 %; rund.
Rand: 2px durchgezogen rgb(0, 0, 0); schwarzer Rand.
Deckkraft: 0; Transparenz ist 0;
Transformieren: Drehen (720 Grad); 720 Grad drehen.

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 %;
Rahmen links: 6px durchgezogen rgb(0, 0, 0);
Lassen Sie die Pseudoklasse zunächst ein Kreis sein, legen Sie dann nur eine Grenze fest, um einen Bogen zu bilden, und positionieren Sie sie dann auf dem übergeordneten Element, um ein Magatama zu bilden.

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%;
oben: 50%; in der Mitte.
Opazität: transparent.
Maßstab (0,1); Verkleinern.
100%{…} an die entsprechende Position, und werden gleichzeitig undurchsichtig und vergrößern sich auf die Normalgröße.

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;
links: 38%;
oben: 30 %; Positionieren Sie die entsprechende Position.
Hintergrundfarbe: rgb(255, 255, 255); weiß.
z-index: 10; Auf 10 gesetzt, auf der obersten Ebene angezeigt.

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
oben: 50 %;
links: 50%;
Transformieren: Verschieben (-50 %, -50 %); Zentrierte Ausrichtung.
Animation: Stellen Sie die Animation so ein, dass es violett wird. vorwärts: erbt die Eigenschaften des letzten Frames.
Hintergrundfarbe: rgb(0, 0, 0); schwarz
Hintergrundfarbe: rgb(144, 130, 183); Lila.

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.
Animation: Stellen Sie die Animation so ein, dass der Reinkarnationskreis nach und nach größer wird und sich violett färbt.

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

Linux verwendet Bond, um zwei Netzwerkkarten zu implementieren und einen einzelnen IP-Beispielcode zu binden

Um eine hohe Verfügbarkeit des Netzwerks zu gewäh...

JS-Objektkonstruktor Object.freeze

Inhaltsverzeichnis Überblick Beispiel 1) Objekt e...

So fügen Sie Docker ein Zertifikat hinzu

1. Upgrade-Vorgang: sudo apt-get update Probleme ...

Vue implementiert Drag & Drop für mehrspaltiges Layout

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

Die Ressourcen und Aktivierungsmethoden des MySQL-Desktoptools SQLyog verabschieden sich von der schwarz-weißen Befehlszeile

Lassen Sie uns ohne weitere Umschweife mit den Re...

W3C Tutorial (1): W3C verstehen

Das W3C, eine 1994 gegründete Organisation, zielt...

Docker erstellt CMS-On-Demand-System mit Player-Funktion

Inhaltsverzeichnis Text 1. Maschine vorbereiten 2...

Linux-Installation, MongoDB-Start und Lösung allgemeiner Probleme

MongoDB-Installationsprozess und Problemaufzeichn...

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)

Mit dem obigen Artikel habe ich meine Einführung i...

PHP-bezogene Pfade und Änderungsmethoden in der Ubuntu-Umgebung

PHP-bezogene Pfade in der Ubuntu-Umgebung PHP-Pfa...

VUE implementiert eine Timeline-Wiedergabekomponente

In diesem Artikelbeispiel wird der spezifische Co...

HTML-Tabelle_Powernode Java Academy

Um eine Tabelle in HTML zu zeichnen, verwenden Si...

Verstehen Sie den aktuellen Status der HTML5-Entwicklung in der mobilen Entwicklung genau

„Wir schreiben unsere nächste Reihe mobiler Produ...

Detailliertes Verständnis und vergleichende Analyse der Server Apache, Tomcat und Nginx

1 Frage Der Server des Unternehmens verwendet Apa...

Detailliertes Installationstutorial für die MySQL 5.6.36-Version für Windows x64

1. Zielumgebung Windows 7 64-bit 2. Materialien (...