recherche

Maison >interface Web >js tutoriel >Générateur de formes aléatoires au néon utilisant du code javascript, suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

Générateur de formes aléatoires au néon utilisant du code javascript, suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

DDD
DDDoriginal
2024-12-03 06:22:13902parcourir

Neon Random Shape Generator using javascript code follow us on instagram: https://www.instagram.com/webstreet_code/

https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Shape & Color Generator</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: radial-gradient(circle, #1e1e1e, #2d2d2d, #3b3b3b, #444444);
      cursor: pointer;
    }

    .shape {
      position: absolute;
      transform: translate(-50%, -50%);
      animation: popIn 0.6s ease;
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
    }

    @keyframes popIn {
      0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }

    @keyframes neonBackground {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

  </style>
</head>
<body>

  <script>
    document.body.addEventListener('click', function (e) {
      const shape = document.createElement('div');
      const size = Math.random() * 120 + 50; // Random size between 50px and 170px
      const colors = [
        '#FF007C', '#00F5D4', '#FAFF00', '#FF5D73', '#08F7FE', 
        '#9B5DE5', '#F15BB5', '#FEE440', '#00BBF9', '#00F5D4'
      ];
      const randomColor = colors[Math.floor(Math.random() * colors.length)];
      const shapes = ['50%', '0%', 'polygon(50% 0%, 0% 100%, 100% 100%)']; // Circle, Square, Triangle

      shape.style.width = `${size}px`;
      shape.style.height = `${size}px`;
      shape.style.background = `linear-gradient(145deg, ${randomColor}, #000)`;
      shape.style.borderRadius = shapes[Math.floor(Math.random() * shapes.length)];
      shape.style.left = `${e.clientX}px`;
      shape.style.top = `${e.clientY}px`;
      shape.style.boxShadow = `0 0 20px ${randomColor}, 0 0 40px ${randomColor}, 0 0 80px ${randomColor}`;
      shape.classList.add('shape');

      document.body.appendChild(shape);

      setTimeout(() => {
        shape.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
        shape.style.transform = 'translate(-50%, -50%) scale(0)';
        shape.style.opacity = '0';
      }, 1000);

      setTimeout(() => {
        shape.remove();
      }, 1500);
    });
  </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 using 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：Comment puis-je compter efficacement les valeurs en double dans un tableau JavaScript ?Article suivant：Comment puis-je compter efficacement les valeurs en double dans un tableau JavaScript ?

Articles Liés

Voir plus