Advertisement
Aniket_Goku

naka

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