Diwali animation using html ,css and javascript https://www.instagram.com/webstreet

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/
Mary-Kate Olsen
Release： 2024-11-03 00:41:30
Original
371 people have browsed it
Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/
https://www.instagram.com/webstreet_code/
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diwali Diyas Animation</title>
<!-- Importing Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap" rel="stylesheet">
<style>
  /* Full-screen setup */
  body {
    margin: 0;
    overflow: hidden;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative; /* Positioning context for firecrackers */
  }

  .container {
    z-index: 1;
    display: block;
    color: white;
    text-align: center; /* Center align heading */
  }

  .heading {
    z-index: 1;
    margin: 5px;
    padding: 50px;
    font-size: 50px;
    font-family: 'Moon Dance', cursive; /* Apply the Moon Dance font */
    text-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 30px rgba(255, 255, 0, 1); /* Yellow glowing effect */
  }

  /* Container for positioning diyas */
  .diya-container {
    display: flex;
    gap: 20px; /* Space between diyas */
    justify-content: center; /* Center diyas in the container */
  }

  /* Diya setup */
  .diya {
    z-index: 1;
    position: relative;
    width: 60px; /* Width of diya */
    height: 30px; /* Height of diya */
    background-color: #8B4513; /* Brown bowl color */
    border-bottom-left-radius: 30px; /* Bowl shape */
    border-bottom-right-radius: 30px; /* Bowl shape */
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.6); /* Glowing effect */
    transition: box-shadow 0.3s ease; /* Smooth transition for glow */
  }

  /* Flame setup */
  .flame {
    position: absolute;
    width: 10px; /* Width of flame */
    height: 20px; /* Height of flame */
    background: radial-gradient(circle, #FFA500, #FF4500); /* Flame gradient */
    border-radius: 50%; /* Flame shape */
    left: 50%; /* Center the flame horizontally */
    transform: translateX(-50%); /* Center the flame */
    top: -15px; /* Position above diya */
    animation: flicker 1s infinite alternate; /* Flickering animation */
  }

  /* Slower flickering flame effect */
  @keyframes flicker {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
  }

  /* Glowing effect on hover */
  .diya {
    box-shadow: 0 0 30px rgba(255, 165, 0, 1); /* Intensified glow on hover */
  }

  /* Firecracker styles */
  .firecracker {
    z-index: 0.8;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: explode 0.8s forwards;
  }

  @keyframes explode {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(2);
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* Burst effect styles */
  .burst {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: burst 1s forwards;
  }

  @keyframes burst {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
</head>
<body>

  <div class="container">
    <h1 class="heading">Happy Diwali</h1>

    <!-- Container holding all diyas -->
    <div class="diya-container">
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
    </div>
  </div>

  <script>
    // Function to generate random color
    function getRandomColor() {
      const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'purple', 'cyan', 'magenta'];
      return colors[Math.floor(Math.random() * colors.length)];
    }

    // Function to create firecrackers
    function createFirecrackers() {
      const body = document.body;

      for (let i = 0; i < 30; i++) { // 8 firecrackers at a time
        const firecracker = document.createElement('div');
        firecracker.classList.add('firecracker');

        // Random position
        firecracker.style.left = Math.random() * 100 + 'vw';
        firecracker.style.top = Math.random() * 100 + 'vh'; // Random vertical position

        // Set random color
        firecracker.style.backgroundColor = getRandomColor();

        body.appendChild(firecracker);

        // Create bursts after firecracker animation
        setTimeout(() => {
          createBursts(firecracker);
          firecracker.remove(); // Remove firecracker after it explodes
        }, 1000); // Time when firecracker explodes
      }
    }

    function createBursts(firecracker) {
      const body = document.body;
      const positions = [
        { x: -20, y: -20 }, // Top-left
        { x: 20, y: -20 }, // Top-right
        { x: -20, y: 20 }, // Bottom-left
        { x: 20, y: 20 }   // Bottom-right
      ];

      positions.forEach(pos => {
        const burst = document.createElement('div');
        burst.classList.add('burst');
        burst.style.left = firecracker.offsetLeft + 'px'; // Use firecracker's position
        burst.style.top = firecracker.offsetTop + 'px'; // Use firecracker's position
        burst.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
        burst.style.backgroundColor = firecracker.style.backgroundColor; // Same color as firecracker
        body.appendChild(burst);

        // Remove burst after animation completes
        burst.addEventListener('animationend', () => {
          burst.remove();
        });
      });
    }

    // Delay firecracker animation
    setInterval(createFirecrackers, 2000); // Create firecrackers every 2 seconds
  </script>
</body>
</html>
Copy after login
The above is the detailed content of Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!