HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye

HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye

The result (full code at the bottom):

Blood Eye

The implementation is not difficult, but there is a lot of repeated code.

Implementation (you can follow it step by step):

1. Define the basic tags first:

<!-- Blood Eyes-->
    <div class="zuo">
        <!-- The black spot in the middle of the eye-->
        <div class="zuoZong">
            <!-- The circle where the three magatama are located-->
            <div class="zuoYu">
                <!-- Three Magatama-->
                <span class="yu"></span>
                <span class="yu"></span>
                <span class="yu"></span>
            </div>
        </div>
    </div>
    <!-- Samsara Eye-->
    <div class="you">
        <!-- The black spot in the middle of the eye-->
        <div class="dian"></div>
             <!-- 3 cycles-->
            <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>

2. Define the basic CSS styles for the left and right eyes:

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

border-bottom: 5px solid rgb(70, 70, 70); gives a gray background.
overflow: overflow is hidden.
position: relative; Relative positioning.

3. Begin by defining the basic style of the Sharingan:

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

transform: translateX(-135px); Offset to the left to separate the eyes.
border-radius: Set the radius of the two corners to form an eye shape.
bos-shadowL adds a little shadow to the corner of the eye.

4. Set the eyeball width and height, etc.:

.zuo::after{
            content: '';
            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);
             }
         }

position: absolute; absolute positioning
top: 50%;
left: 50%;
transform: translate(-50%,-50%); Center alignment.
animation: Set the animation to make it turn red. forward: inherits the properties of the last frame.
background-color: rgb(0, 0, 0); black
background-color: rgb(255, 4, 4); Red.

5. Set the black dot in the middle of the eyeball, with some positioning and size, and then set the animation to make it slowly grow:

 .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;
            }
        }

6. Set the circle where the three magatama are located, and set the animation to make it display and rotate:

.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);
            }
        }

position: absolute;
top: -25px;
left: -25px;
bottom: -25px;
right: -25px; size.
border-radius: 50%; round.
border: 2px solid rgb(0, 0, 0); Black border.
opacity: 0; transparency is 0;
transform: rotate(720deg); Rotate 720 degrees.

7. To make three magatama, first make a circle, then use the double pseudo class to make an arc, and the combination of the two is the magatama:

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

        }
        .zuoYu .yu::after{
            content: '';
            position: absolute;
            top: -6px;
            left: -1px;
            width: 6px;
            height: 20px;
            border-radius: 50%;
            border-left: 6px solid rgb(0, 0, 0);
        }

border-radius: 50%;
border-left: 6px solid rgb(0, 0, 0);
First, let the pseudo-class be a circle, then set only one border to form an arc, and then position it on the parent element to form a magatama.

8. Set an animation for the magatama, so that it grows larger and rotates from the center to the circle where the magatama is:

.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);  
            }
        }

left: 50%;
top: 50%; in the middle.
opacity: transparent.
scale(0.1); Zoom out.
100%{…} to the corresponding position, and at the same time become opaque and enlarge to normal size.

9. Similarly, animate the other two magatama:

.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);  
            }
        }

10. Set a white dot for both eyes, which is equivalent to the reflective effect. Now the Sharingan is done:

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

position: absolute;
left: 38%;
top: 30%; Position the corresponding position.
background-color: rgb(255, 255, 255); white.
z-index: 10; Set to 10, displayed on the top layer.

11. Set the basic CSS style of the Samsara Eye, the same as the Blood Eye:

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

12. Set the eyeball width and height, etc.:

.you::after{
            content: '';
            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);
             
             }
         }

position: absolute; absolute positioning
top: 50%;
left: 50%;
transform: translate(-50%,-50%); Center alignment.
animation: Set the animation to make it turn purple. forward: inherits the properties of the last frame.
background-color: rgb(0, 0, 0); black
background-color: rgb(144, 130, 183); Purple.

13. Set the black dot in the middle of the eyeball, similar to the Sharingan:

.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;
             }
         }

14. Set each circle of the Samsara Eye and set the animation to make it bigger:

.youYu{
            position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
       }
       .quan{
           position: absolute;
           border-radius: 50%;
           border: 2px solid #000;
           z-index: calc(1 - var(--r));
           animation: zhi 2s ease-out 2s forwards;
       }
       @keyframes zhi{
           0%{
            top: calc(var(--r) * 1px);
           left: calc(var(--r) * 1px);
           right: calc(var(--r) * 1px);
           bottom: calc(var(--r) * 1px);
           }
           100%{
            top: calc(var(--r) * -35px);
           left: calc(var(--r) * -35px);
           right: calc(var(--r) * -35px);
           bottom: calc(var(--r) * -35px);

               background-color: rgb(187, 177, 214);
           }
       }

z-index: calc(1 - var(–r)); Calculate so that the first circle is displayed on the top layer.
animation: Set the animation so that the reincarnation circle gradually becomes larger and turns purple.

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }
        .zuo , .you{ 
            width: 250px;
            height: 120px;
            background-color: rgb(255, 255, 255);
            border-bottom: 5px solid rgb(70, 70, 70);
            overflow: hidden;
            position: relative;
        }
         
        .zuo{
            transform: translateX(-135px);
            border-radius: 0 120px 0 120px;
            box-shadow: inset 3px 2px 3px rgba(17, 17, 17, 0.8);
        }
        .zuo::after{
            content: '';
            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);
             }
         }

        .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;
            }
        }
        .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);
            }
        }
        .zuoYu .yu{
             position: absolute;
             width: 15px;
             height: 15px;
             border-radius: 50%;
             background-color: rgb(0, 0, 0);

        }
        .zuoYu .yu::after{
            content: '';
            position: absolute;
            top: -6px;
            left: -1px;
            width: 6px;
            height: 20px;
            border-radius: 50%;
            border-left: 6px solid rgb(0, 0, 0);
        }
        .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);  
            }
        }       
        .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);  
            }
        }
        .zuo::before,.you::before{
            content: '';
            position: absolute;
            left: 38%;
            top: 30%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            z-index: 10;
        }
        .you{
            transform: translateX(135px);
            border-radius: 120px 0 120px 0;
            box-shadow: inset -3px 2px 3px rgba(17, 17, 17, 0.8);
/* filter: drop-shadow( 8px -5px 3px rgb(216, 59, 59));
 */ }
         .you::after{
            content: '';
            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);
             
             }
         }
         
         .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;
             }
         }
         .youYu{
            position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
       }
       .quan{
           position: absolute;
           border-radius: 50%;
           border: 2px solid #000;
           z-index: calc(1 - var(--r));
           animation: zhi 2s ease-out 2s forwards;
       }
       @keyframes zhi{
           0%{
            top: calc(var(--r) * 1px);
           left: calc(var(--r) * 1px);
           right: calc(var(--r) * 1px);
           bottom: calc(var(--r) * 1px);
           }
           100%{
            top: calc(var(--r) * -35px);
           left: calc(var(--r) * -35px);
           right: calc(var(--r) * -35px);
           bottom: calc(var(--r) * -35px);

               background-color: rgb(187, 177, 214);
           }
       }
    </style>
</head>
<body>
    <!-- Blood Eyes-->
    <div class="zuo">
        <!-- The black spot in the middle of the eye-->
        <div class="zuoZong">
            <!-- The circle where the three magatama are located-->
            <div class="zuoYu">
                <!-- Three Magatama-->
                <span class="yu"></span>
                <span class="yu"></span>
                <span class="yu"></span>
            </div>
        </div>
    </div>
    <!-- Samsara Eye-->
    <div class="you">
        <!-- The black spot in the middle of the eye-->
        <div class="dian"></div>
             <!-- 3 cycles-->
            <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>
</body>
</html>

This is the end of the article about how to use HTML+CSS to achieve the special effects of the Sharingan and Samsara Eye. For more relevant HTML Sharingan and Samsara Eye special effects content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  4 functions implemented by the transform attribute in CSS3

>>: 

Recommend

Detailed explanation of client configuration for vue3+electron12+dll development

Table of contents Modify the repository source st...

Detailed steps for implementing timeout status monitoring in Apache FlinkCEP

CEP - Complex Event Processing. The payment has n...

How to configure Linux CentOS to run scripts regularly

Many times we want the server to run a script reg...

A case study on MySQL optimization

1. Background A sql-killer process is set up on e...

Use thead, tfoot, and tbody to create a table

Some people use these three tags in a perverted wa...

Vue based on Element button permission implementation solution

Background requirements: The ERP system needs to ...

Xftp download and installation tutorial (graphic tutorial)

If you want to transfer files between Windows and...

Summary of various methods of MySQL data recovery

Table of contents 1. Introduction 2. Direct recov...

How to forget the password of Jenkins in Linux

1.Jenkins installation steps: https://www.jb51.ne...

JavaScript implements front-end countdown effect

This article shares the specific code of JavaScri...

js to achieve simple accordion effect

This article shares the specific code of js to ac...

What you need to know about msyql transaction isolation

What is a transaction? A transaction is a logical...

Vue sample code for easily implementing virtual scrolling

Table of contents Preface Rolling principle accom...

Some ways to eliminate duplicate rows in MySQL

SQL statement /* Some methods of eliminating dupl...

How to encapsulate axios in Vue

Table of contents 1. Installation 1. Introduction...