Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So implementieren Sie die Spezialeffekte „Blood Wheel Eye' und „Reincarnation Eye' mit reinem CSS (detaillierte Code-Erklärung)

青灯夜游
Freigeben: 2021-07-14 18:13:34
nach vorne
2570 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie mit reinem CSS die Spezialeffekte von Blood Wheel Eye + Reincarnation Eye erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

So implementieren Sie die Spezialeffekte „Blood Wheel Eye und „Reincarnation Eye mit reinem CSS (detaillierte Code-Erklärung)

Effekt (der vollständige Code befindet sich unten)

Tatsächlich ist es nicht schwer zu implementieren, es handelt sich um viel wiederholten Code.

Implementierung (Sie können Schritt für Schritt folgen), um zu schreiben:

1. Definieren Sie zunächst den grundlegenden CSS-Stil des linken und rechten Auges:

<!-- So implementieren Sie die Spezialeffekte „Blood Wheel Eye und „Reincarnation Eye mit reinem CSS (detaillierte Code-Erklärung) -->
    <div class="zuo">
        <!-- 眼睛最中间那个黑点 -->
        <div class="zuoZong">
            <!-- 三勾玉所在的圈 -->
            <div class="zuoYu">
                <!-- 三个勾玉 -->
                <span class="yu"></span>
                <span class="yu"></span>
                <span class="yu"></span>
            </div>
        </div>
    </div>
    <!-- 轮回眼 -->
    <div class="you">
        <!-- 眼睛最中间那个黑点 -->
        <div class="dian"></div>
             <!-- 3个轮回圈 -->
            <div class="youYu">                        
                <span class="quan" style="--r:2;"></span>
                <span class="quan" style="--r:3;"></span>
                <span class="quan" style="--r:4;"></span>
            </div>       
    </div>
Nach dem Login kopieren

border- Unten: 5 Pixel einfarbiges RGB (70, 70, 70); Erzeuge ein Grau unter den Augen. Überlauf: Überlauf ausgeblendet.

Position: relativ; relative Positionierung.

3. Definieren Sie zunächst den Grundstil des Blut-Chakra-Auges:

.zuo , .you{ 
            width: 250px;
            height: 120px;
            background-color: rgb(255, 255, 255);
            border-bottom: 5px solid rgb(70, 70, 70);
            overflow: hidden;
            position: relative;
        }
Nach dem Login kopieren

transform: translatorX(-135px); Nach links verschieben, um die beiden Augen zu trennen.

Randradius: Legen Sie den Bogen für die beiden Ecken fest, um eine Augenform zu bilden.

bos-shadowL verleiht den Augenwinkeln einen kleinen Schatten.

4. Stellen Sie die Breite und Höhe des Augapfels ein:

.zuo{
            transform: translateX(-135px);
            border-radius: 0 120px 0 120px;
            box-shadow: inset 3px 2px 3px  rgba(17, 17, 17, 0.8);
        }
Nach dem Login kopieren

5. Stellen Sie den schwarzen Punkt in der Mitte des Augapfels ein, der eine gewisse Positionierungsgröße hat, und stellen Sie dann die Animation so ein, dass er langsam größer wird :

.zuo::after{
            content: &#39;&#39;;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 95px;
            height: 95px;
            border-radius: 50%;
            border: 2px solid #000;
            animation: colour 2s linear forwards;
        }
        @keyframes colour{
            0%,30%{
                background-color: rgb(0, 0, 0);
            }
            100%{
                 background-color: rgb(255, 4, 4);
             }
         }
Nach dem Login kopieren

6 Legen Sie den Kreis fest, in dem sich die drei Magatama befinden, und stellen Sie die Animation so ein, dass sie angezeigt und gedreht wird:

 .zuoZong{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 0px;
            height: 0px;
            border-radius: 50%;
            background-color: rgb(0, 0, 0);
            z-index: 1;
            animation: da 3s linear forwards;
        }
        @keyframes da{
            100%{
                width: 15px;
            height: 15px;
            }
        }
Nach dem Login kopieren

7. Um die drei Magatama zu erstellen, erstellen Sie zuerst einen Kreis und verwenden Sie dann Double Pseudoklassen zum Erstellen eines Bogens Lassen Sie die Pseudoklasse zunächst einen Kreis sein, legen Sie dann nur einen Rand fest, bilden Sie einen Bogen und positionieren Sie ihn dann auf dem übergeordneten Element, um Magatama zu bilden.

8. Animieren Sie das Magatama, so dass es größer wird und sich von der Mitte zum Kreis dreht, in dem sich das Magatama befindet:

.zuoYu{
            position: absolute;
            top: -25px;
            left: -25px;
            bottom: -25px;
            right: -25px;
            border-radius: 50%;
            border: 2px solid rgb(0, 0, 0);
            animation: zhuan 2s linear 2s forwards;
            opacity: 0;
        }
        @keyframes zhuan{
           
            100%{
                opacity: 1;
                transform: rotate(720deg);
            }
        }
Nach dem Login kopieren

links: 50 %;
Deckkraft: transparent.

Skala (0,1); reduzieren.

100 %{…} an der entsprechenden Position, während es undurchsichtig wird und es auf die normale Größe vergrößert.

9. Animieren Sie die anderen beiden Magatama:

.zuoYu .yu{
             position: absolute;
             width: 15px;
             height: 15px;
             border-radius: 50%;
             background-color: rgb(0, 0, 0);

        }
        .zuoYu .yu::after{
            content: &#39;&#39;;
            position: absolute;
            top: -6px;
            left: -1px;
            width: 6px;
            height: 20px;
            border-radius: 50%;
            border-left: 6px solid rgb(0, 0, 0);
        }
Nach dem Login kopieren
10. An diesem Punkt ist das Blutchakra-Auge fertig:

  .zuoYu .yu:nth-child(1){
            animation: yu1 2s ease-in 2s  forwards;
        }
        @keyframes yu1{
            0%{
                opacity: 0;
                left: 50%;
                top: 50%;                
                transform:translate(-50%,-50%)  scale(0.1) ;
            }
            100%{
                left: 50%;
                top: -9%;
                transform: scale(1) rotate(80deg);  
            }
        }
Nach dem Login kopieren


Position: absolut;
links: 38%;
oben: 30%; Positionieren Sie die entsprechende Position.
Hintergrundfarbe: RGB(255, 255, 255); weiß.

Z-Index: 10; Auf 10 gesetzt, oben angezeigt.

11. Stellen Sie den grundlegenden CSS-Stil des Samsara-Auges ein, genau wie beim Blood Wheel Eye:

.zuoYu .yu:nth-child(2){
            animation: yu2 2s ease-in 2s forwards; 
        }
        @keyframes yu2{
            0%{
                opacity: 0;
                left: 50%;
                top: 50%;
                
                transform: translate(-50%,-50%) scale(0.1) ;
            }
            100%{
                top: 60%;
                left: -9%;
                transform: scale(1) rotate(-60deg);  
            }
        }
        .zuoYu .yu:nth-child(3){          
            animation: yu3 2s ease-in 2s forwards;
        }
        @keyframes yu3{
            0%{
                opacity: 0;
                right: 50%;
                top: 50%;
                
                transform: translate(-50%,-50%) scale(0.1);
            }
            100%{
                top: 60%;
                right: -9%;
                transform: scale(1) rotate(180deg);  
            }
        }
Nach dem Login kopieren
12. Stellen Sie die Breite und Höhe des Augapfels ein:

.zuo::before,.you::before{
            content: &#39;&#39;;
            position: absolute;
            left: 38%;
            top: 30%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            z-index: 10;
        }
Nach dem Login kopieren


Position: absolut Positionierung: oben: 50 %;
links: 50 %;
transformieren: übersetzen (-50 %, -50 %);
Animation: Stellen Sie die Animation so ein, dass sie lila wird. vorwärts: Erben Sie die Eigenschaften des letzten Frames.

Hintergrundfarbe: RGB(0, 0, 0); Schwarz
Hintergrundfarbe: RGB(144, 130, 183);

13. Setzen Sie den schwarzen Fleck in die Mitte des Augapfels, der dem Blutradauge ähnelt:

 .you{
            transform: translateX(135px);
            border-radius:  120px 0 120px 0;
            box-shadow: inset -3px 2px 3px  rgba(17, 17, 17, 0.8);
        }
Nach dem Login kopieren

14. Stellen Sie jeden Kreis des Samsara-Auges ein, um ihn zu vergrößern:

.you::after{
            content: &#39;&#39;;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 95px;
            height: 95px;
            border-radius: 50%;
            border: 2px solid #000;
            animation: youcolor 2s linear forwards;
         }
         @keyframes youcolor{
            0%,30%{
                background-color: rgb(0, 0, 0);
            }
            100%{
                 background-color: rgb(144, 130, 183);
             
             }
         }
Nach dem Login kopieren


z- index: calc(1 - var(–r)); Berechnen Sie so, dass der erste Kreis oben angezeigt wird.
Animation: Stellen Sie die Animation so ein, dass der Reinkarnationskreis allmählich größer wird und gleichzeitig lila wird.


Vollständiger Code:

.dian{       
             position: absolute;
            top: 50%;
            left: 50%;              
            background-color: #000;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            z-index: 10;
            animation: youda 3s linear forwards;
         }
         @keyframes youda{
             0%{
                height: 0px;
            width: 0px;
             }
             100%{
                height: 15px;
            width: 15px;
             }
         }
Nach dem Login kopieren
(Lernvideo-Sharing:

CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Spezialeffekte „Blood Wheel Eye' und „Reincarnation Eye' mit reinem CSS (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage