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

HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)

I followed the tutorial on W3school. I think the t...

What to do if the online MySQL auto-increment ID is exhausted

Table of contents Table definition auto-increment...

Example of implementing dynamic verification code on a page using JavaScript

introduction: Nowadays, many dynamic verification...

Detailed explanation of keywords and reserved words in MySQL 5.7

Preface The keywords of MySQL and Oracle are not ...

Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk

Problem Description When using Windows Server 201...

Tutorial on installing nginx in Linux environment

Table of contents 1. Install the required environ...

Learn javascript iterator

Table of contents Introduction What does an itera...

Design Reference Beautiful and Original Blog Design

All blogs listed below are original and uniquely ...

Why TypeScript's Enum is problematic

Table of contents What happened? When to use Cont...

Explanation of MySQL performance inspection through show processlist command

The show processlist command is very useful. Some...

JS implements simple addition and subtraction of shopping cart effects

This article example shares the specific code of ...

Examples of using MySQL pessimistic locking and optimistic locking

Pessimistic Lock Pessimistic lock, considers the ...

How to change the host name in Linux

1. View the current host name [root@fangjian ~]# ...

How to install mysql5.6 in docker under ubuntu

1. Install mysql5.6 docker run mysql:5.6 Wait unt...

Docker starts in Exited state

After docker run, the status is always Exited Sol...