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

How to add configuration options to Discuz! Forum

Discuz! Forum has many configuration options in th...

Specific use of MySQL binlog_ignore_db parameter

Preface: After studying the previous article, we ...

Detailed explanation of the command mode in Javascript practice

Table of contents definition structure Examples C...

Solve the 1251 error when establishing a connection between mysql and navicat

I reinstalled the computer and installed the late...

Using JavaScript to implement carousel effects

This article shares the specific code for JavaScr...

WeChat Mini Program Lottery Number Generator

This article shares the specific code of the WeCh...

Use IISMonitor to monitor web pages and automatically restart IIS

Table of contents 1. Tool Introduction 2. Workflo...

Basic JSON Operation Guide in MySQL 5.7

Preface Because of project needs, the storage fie...

Detailed explanation of Linux server status and performance related commands

Server Status Analysis View Linux server CPU deta...

JavaScript method to detect the type of file

Table of contents 1. How to view the binary data ...

Summary of the 10 most frequently asked questions in Linux interviews

Preface If you are going to interview for a Linux...

Introduction to common MySQL storage engines and parameter setting and tuning

MyISAM, a commonly used storage engine in MySQL c...

CentOS 7 installation and configuration method graphic tutorial

This article records the detailed installation tu...

Solution to Navicat Premier remote connection to MySQL error 10038

Remote connection to MySQL fails, there may be th...

Detailed explanation of how to solve the position:fixed fixed positioning offset problem

question CSS fixed positioning position:fixed is ...