4/10 – chickenwings

i added more and found more things to add

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 150px;
  
  /* REMOVE default animation */
}

.spinner-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform-origin: 0 -240px;
}

.spinner-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
  transform: rotate(calc(-1 * var(--angle)));
}

/* Your angles stay the same */
.spinner-item:nth-child(1) { --angle: 0.0deg;   transform: rotate(0.0deg); }
.spinner-item:nth-child(2) { --angle: 15.0deg;   transform: rotate(15.0deg); }
.spinner-item:nth-child(3) { --angle: 30.0deg;   transform: rotate(30.0deg); }
.spinner-item:nth-child(4) { --angle: 45.0deg;   transform: rotate(45.0deg); }
.spinner-item:nth-child(5) { --angle: 60.0deg;   transform: rotate(60.0deg); }
.spinner-item:nth-child(6) { --angle: 75.0deg;   transform: rotate(75.0deg); }
.spinner-item:nth-child(7) { --angle: 90.0deg;   transform: rotate(90.0deg); }
.spinner-item:nth-child(8) { --angle: 105.0deg;   transform: rotate(105.0deg); }
.spinner-item:nth-child(9) { --angle: 120.0deg;   transform: rotate(120.0deg); }
.spinner-item:nth-child(10) { --angle: 135.0deg;   transform: rotate(135.0deg); }
.spinner-item:nth-child(11) { --angle: 150.0deg;   transform: rotate(150.0deg); }
.spinner-item:nth-child(12) { --angle: 165.0deg;   transform: rotate(165.0deg); }
.spinner-item:nth-child(13) { --angle: 180.0deg;   transform: rotate(180.0deg); }
.spinner-item:nth-child(14) { --angle: 195.0deg;   transform: rotate(195.0deg); }
.spinner-item:nth-child(15) { --angle: 210.0deg;   transform: rotate(210.0deg); }
.spinner-item:nth-child(16) { --angle: 225.0deg;   transform: rotate(225.0deg); }
.spinner-item:nth-child(17) { --angle: 240.0deg;   transform: rotate(240.0deg); }
.spinner-item:nth-child(18) { --angle: 255.0deg;   transform: rotate(255.0deg); }
.spinner-item:nth-child(19) { --angle: 270.0deg;   transform: rotate(270.0deg); }
.spinner-item:nth-child(20) { --angle: 285.0deg;   transform: rotate(285.0deg); }
.spinner-item:nth-child(21) { --angle: 300.0deg;   transform: rotate(300.0deg); }
.spinner-item:nth-child(22) { --angle: 315.0deg;   transform: rotate(315.0deg); }
.spinner-item:nth-child(23) { --angle: 330.0deg;   transform: rotate(330.0deg); }
.spinner-item:nth-child(24) { --angle: 345.0deg;   transform: rotate(345.0deg); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Center button */
.spinner-center {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.spinner-center:active {
  transform: scale(0.95);
}

/* Class added when clicked */
.spin-on-click {
  animation: spin 2s linear infinite !important;
}

was my css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Symbol Spinner</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="spinner-wrapper">
  <div class="spinner-ring">
    <div class="spinner-item"><img src="Borumaki_Gaiden.webp"></div>
    <div class="spinner-item"><img src="BorumakiShiki.webp"></div>
    <div class="spinner-item"><img src="Code_Gaiden.webp"></div>
    <div class="spinner-item"><img src="Fizz.webp"></div>
    <div class="spinner-item"><img src="Frost.webp"></div>
    <div class="spinner-item"><img src="Inferno.webp"></div>
    <div class="spinner-item"><img src="Ink.webp"></div>
    <div class="spinner-item"><img src="Magma.webp"></div>
    <div class="spinner-item"><img src="Menza.webp"></div>
    <div class="spinner-item"><img src="Octo-Ink.webp"></div>
    <div class="spinner-item"><img src="ShiverRagnar.webp"></div>
    <div class="spinner-item"><img src="SurgeIcon.webp"></div>
    <div class="spinner-item"><img src="RELL.webp"></div>
    <div class="spinner-item"><img src="Vanhelsing.webp"></div>
    <div class="spinner-item"><img src="Jayramaki.webp"></div>
    <div class="spinner-item"><img src="RaionRengoku.webp"></div>
    <div class="spinner-item"><img src="Forged_Rengoku.webp"></div>
    <div class="spinner-item"><img src="Kamaki-Akuma.webp"></div>
    <div class="spinner-item"><img src="Shindai.webp"></div>
    <div class="spinner-item"><img src="Sharingan_Triple.webp"></div>
    <div class="spinner-item"><img src="Menza.webp"></div>
    <div class="spinner-item"><img src="Octo-Ink.webp"></div>
    <div class="spinner-item"><img src="ShiverRagnar.webp"></div>
    <div class="spinner-item"><img src="SurgeIcon.webp"></div>
  </div>

  <div class="spinner-center"></div>
</div>



    <div class="spinner-center"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

was my html

Leave a Comment Cancel Reply