Maison >interface Web >js tutoriel >Animation de Diwali en utilisant html, css et javascript https://www.instagram.com/webstreet_code/

Animation de Diwali en utilisant html, css et javascript https://www.instagram.com/webstreet_code/

Mary-Kate Olsenoriginal: 2024-11-03 00:41:30422parcourir

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html using animation https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：(a == 1 && a == 2 && a == 3) peut-il être vrai en JavaScript ?Article suivant：(a == 1 && a == 2 && a == 3) peut-il être vrai en JavaScript ?

Articles Liés

Voir plus