Advertisement
Aniket_Goku

fugaku

Mar 24th, 2021
124
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.56 KB | None | 0 0
  1. <html>
  2. <head><title>Fugaku</title></head>
  3.     <style>
  4.         :root
  5.         {
  6.             --sharingan:400px;
  7.             --shadow:calc(var(--sharingan)/5);
  8.             --t-width:calc(var(--sharingan)/2.5);
  9.             --t-height:calc(var(--sharingan)/2);
  10.             --px1:calc(var(--sharingan)/18);       
  11.             --px2:calc(var(--sharingan)/10);
  12.             --mecir:calc(var(--sharingan)/4);
  13.             --encir:calc(var(--sharingan)/10);         
  14.         }
  15.         #sh
  16.         {
  17.             position:absolute;
  18.             width:var(--sharingan);
  19.             height:var(--sharingan);
  20.             margin-top:2%;
  21.             margin-left:2%;
  22.             border:10px solid black;
  23.             border-radius:50%;
  24.             background:red;
  25.             box-shadow:inset 0 0 var(--shadow) 10px  black;
  26.  
  27.         }
  28.         #cir
  29.         {
  30.             position:absolute;
  31.             width:var(--sharingan);
  32.             height:var(--sharingan);
  33.             left:-0.5%;
  34.             top:-0.5%;
  35.             border:0px solid blue;
  36.             border-radius:50%;
  37.  
  38.         }
  39.         #c
  40.         {
  41.             position:absolute;
  42.             width:var(--sharingan);
  43.             height:var(--sharingan);
  44.             left:-0.5%;
  45.             top:-0.5%;
  46.             border:0px solid blue;
  47.             border-radius:50%;
  48.             animation:ro 2s ease-in-out infinite;
  49.         }
  50.         #clash
  51.         {
  52.             position:absolute;
  53.             width:var(--t-width);
  54.             height:var(--t-height);
  55.             top:25%;
  56.             left:-1%;
  57.             border-radius:50%; 
  58.             border-top:var(--px1) solid black;
  59.             border-right:var(--px2) solid transparent;
  60.             transform:rotate(40deg);
  61.         }
  62.         #leftcir
  63.         {
  64.             position:absolute;
  65.             width:calc(var(--sharingan)/15);
  66.             height:calc(var(--sharingan)/15);
  67.             top:35%;
  68.             left:25%;
  69.             border:10px solid black;
  70.             border-radius:50%;
  71.             background:black;
  72.            
  73.         }
  74.         #endcir
  75.         {
  76.             top:44.4%;
  77.             left:44.4%;
  78.             position:absolute;
  79.             width:var(--encir);
  80.             height:var(--encir);
  81.             border:2px solid black;
  82.             background:black;
  83.             border-radius:50%;
  84.             box-shadow:0 0 var(--shadow) 10px black;
  85.         }
  86.         #mecir
  87.         {
  88.             top:37%;
  89.             left:37%;
  90.             position:absolute;
  91.             width:var(--mecir);
  92.             height:var(--mecir);
  93.             border:2px solid black;
  94.             background:red;
  95.             border-radius:50%;
  96.            
  97.         }
  98.         #cir:nth-child(){}
  99.         #cir:nth-child(2){transform:rotate(120deg);}   
  100.         #cir:nth-child(3){transform:rotate(-120deg);}
  101.         @keyframes ro
  102.         {
  103.             from{transform:rotate(0deg)}
  104.             to{transform:rotate(360deg)}
  105.         }
  106.     </style>
  107.     <body bgcolor="#585858">
  108.         <div id="sh">
  109.             <div id="c" >
  110.                 <div id="cir">
  111.                     <div id="clash"></div>
  112.                     <div id="leftcir"></div>
  113.                 </div>
  114.                 <div id="cir">
  115.                     <div id="clash"></div>
  116.                     <div id="leftcir"></div>
  117.                     </div>
  118.                 <div id="cir">
  119.                     <div id="clash"></div>
  120.                     <div id="leftcir"></div>
  121.                 </div>
  122.                 <div id="mecir"></div>
  123.                 <div id="endcir"></div>
  124.             </div>
  125.         </div>
  126.     </body>
  127. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement