suchen

Heim >Web-Frontend >js-Tutorial >Neon-Zufallsformgenerator mit Javascript-Code. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

Neon-Zufallsformgenerator mit Javascript-Code. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

DDD
DDDOriginal
2024-12-03 06:22:13921Durchsuche

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>

Das obige ist der detaillierte Inhalt vonNeon-Zufallsformgenerator mit Javascript-Code. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript using 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：Wie kann ich doppelte Werte in einem JavaScript-Array effizient zählen?Nächster Artikel：Wie kann ich doppelte Werte in einem JavaScript-Array effizient zählen?

In Verbindung stehende Artikel

Mehr sehen