<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotating Shapes Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container"></div>
  <p class="copyright">&copy; <a href="https://codecrafti.blogspot.com" target="_blank">codecrafti.blogspot.com</a></p>
  
  <!-- Download link for earning game -->
  <div class="download-game">
    <a href="https://s9game.vip/?from_gameid=5044767&channelcode=4050000" target="_blank">
      <button>Download Free Earning Game</button>
    </a>
  </div>
  
  <script src="script.js"></script>
  <script src="tree.js"></script>
</body>
</html>
/* Global Styles */

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* Container Styles */

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  justify-content: center;
  align-content: center;
}

/* Shape Styles */

.shape {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 0 50%;
  transform-origin: 15px 15px;
  mix-blend-mode: plus-lighter;
  box-shadow: 10px 10px 5px var(--color), 5px 5px 50px var(--color);
  animation: rotate var(--duration) var(--delay) infinite linear;
}

.shape:nth-child(odd) {
  animation-direction: reverse;
}

/* Animation Keyframes */

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}

/* Download game styles */

.download-game {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.download-game button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.download-game button:hover {
  background-color: #3e8e41;
}
const container = document.querySelector('.container');
const numShapes = 36;

for (let i = 0; i < numShapes; i++) {
  const shape = document.createElement('i');
  shape.classList.add('shape');
  
  // Add custom properties
  shape.style.setProperty('--color', `hsl(${i * 10}, 80%, 60%)`); // Rainbow colors
  shape.style.setProperty('--duration', `${2 + i * 0.1}s`); // Increasing duration
  shape.style.setProperty('--delay', `${i * 0.05}s`); // Staggered delay
  
  container.appendChild(shape);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.