suchen

Heim  >  Artikel  >  Web-Frontend  >  Diwali-Animation mit HTML, CSS und Javascript https://www.instagram.com/webstreet_code/

Diwali-Animation mit HTML, CSS und Javascript https://www.instagram.com/webstreet_code/

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-03 00:41:30374Durchsuche

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>

Das obige ist der detaillierte Inhalt vonDiwali-Animation mit HTML, CSS und Javascript https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html using animation https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kann (a == 1 && a == 2 && a == 3) jemals in JavaScript wahr sein?Nächster Artikel：Kann (a == 1 && a == 2 && a == 3) jemals in JavaScript wahr sein?

In Verbindung stehende Artikel

Mehr sehen