API tools faq
paste
Advertisement
Aniket_Goku

Sharingan

Aniket_Goku
Mar 24th, 2021
167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.33 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.     </head>
  4.     <style>
  5.         :root
  6.         {
  7.             --sharingan-size:400px;
  8.             --shadow:calc(var(--sharingan-size)/5);
  9.             --eyering-size:calc(var(--sharingan-size)/2);
  10.             --eyering-pos:calc(var(--sharingan-size)/4.5);
  11.             --incircle-size:calc(var(--sharingan-size)/5);
  12.             --tomoe-size:calc(var(--sharingan-size)/6.7);  
  13.            
  14.                
  15.         }
  16.         *,*::before,*::after
  17.         {
  18.             box-sizing:border-box;
  19.             margin:0;
  20.             padding:0;
  21.         }
  22.         #sharingan
  23.         {
  24.             position:absolute;
  25.             width:var(--sharingan-size);
  26.             height:var(--sharingan-size);
  27.             border-radius:50%;
  28.             margin-top:3%;
  29.             margin-left:3%;
  30.             border:10px solid black;
  31.             align:center;
  32.             background:red;
  33.             box-shadow:inset 0 0 var(--shadow) black;
  34.            
  35.         }
  36.         #red-shadow
  37.         {
  38.             position:absolute;
  39.             width:var(--sharingan-size);
  40.             height:var(--sharingan-size);
  41.             border-radius:50%;
  42.             margin-top:3%;
  43.             margin-left:3%;
  44.             border:1px ;
  45.            
  46.            
  47.         }
  48.         #eyering
  49.         {
  50.             width:var(--eyering-size);
  51.             height:var(--eyering-size);
  52.             border:4px solid black;
  53.             border-radius:50%;
  54.             align:center;
  55.             position:absolute;
  56.             top:var(--eyering-pos);
  57.             left:var(--eyering-pos);
  58.             border-style:dotted;
  59.             filter:blur(1px);
  60.             background:transparent;
  61.            
  62.            
  63.            
  64.  
  65.         }
  66.         #circle
  67.         {
  68.             width:var(--incircle-size);
  69.             height:var(--incircle-size);
  70.             border:3px solid black;
  71.             border-radius:50%;
  72.             box-shadow: 0 0 var(--shadow) 15px black;
  73.             align:center;
  74.             position:absolute;
  75.             top:calc(var(--eyering-pos)/1.48);
  76.             left:calc(var(--eyering-pos)/1.48);
  77.             background:black;
  78.            
  79.            
  80.         }
  81.         #tomoe-area
  82.         {  
  83.        
  84.             position:absolute;
  85.             border:px solid black;
  86.             width:calc(var(--eyering-size)*1);
  87.             height:calc(var(--eyering-size)*1);
  88.             border-radius:100%;
  89.             top:50%;
  90.             left:50%;
  91.             transform:translate(-50% ,-50%);
  92.        
  93.         }
  94.        
  95.         #tomoe
  96.         {
  97.             position:absolute;
  98.             top:-16.5%;
  99.             left:50%;
  100.             width:var(--tomoe-size);
  101.             height:var(--tomoe-size);
  102.             border-radius:50%;
  103.             background:black;
  104.             transform:translate(-50%);
  105.         }
  106.        
  107.         #coma
  108.         {   position:absolute;
  109.            
  110.            
  111.             top:-25%;
  112.             left:67%;
  113.             height:calc(var(--tomoe-size)*2.5);
  114.             width:calc(var(--tomoe-size)*1.8);
  115.             border-radius:50%;
  116.             transform:translate(-50%) rotate(-40deg);
  117.             border-top:calc(var(--tomoe-size)/1.5) solid black;
  118.             border-left:calc(var(--tomoe-size)/1.1) solid transparent;     
  119.         }
  120.        
  121.         body
  122.         {
  123.             display:flex;
  124.             background:gray;
  125.            
  126.         }
  127.         #tomoe-area:nth-child(1)
  128.         {
  129.        
  130.            
  131.         }
  132.         #tomoe-area:nth-child(2)
  133.         {
  134.             transform:translate(-50%,-50%) rotate(120deg);
  135.        
  136.         }
  137.         #tomoe-area:nth-child(3)
  138.         {
  139.             transform:translate(-50%,-50%) rotate(-120deg);
  140.        
  141.         }
  142.         @keyframes an
  143.         {
  144.            
  145.             0%{transform:rotate(0deg);}
  146.            
  147.             100%{ transform:rotate(360deg);}
  148.         }
  149.        
  150.        
  151.     </style>
  152.     <body >
  153.        
  154.         <div id="sharingan">
  155.             <div id="eyering"></div>
  156.             <div id="eyering" style=" border:0px ;animation :an 3s ease-in-out infinite; ">
  157.                     <div id="circle"></div>
  158.            
  159.                 <div id="tomoe-area" >             
  160.                     <div id="tomoe"></div> 
  161.                     <div id="coma"></div>      
  162.                    
  163.                 </div>
  164.                 <div id="tomoe-area" >
  165.                    
  166.                     <div id="tomoe"></div> 
  167.                     <div id="coma"></div>      
  168.                    
  169.                 </div>
  170.                 <div id="tomoe-area"  >
  171.                    
  172.                     <div id="tomoe"></div> 
  173.                     <div id="coma"></div>      
  174.                    
  175.                 </div>
  176.                
  177.             </div> 
  178.             </div>
  179.         </div>
  180.     </body>
  181.  
  182. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!