cari

Rumah >hujung hadapan web >tutorial js >Neon Random Shape Generator menggunakan kod javascript ikuti kami di instagram: https://www.instagram.com/webstreet_code/

Neon Random Shape Generator menggunakan kod javascript ikuti kami di instagram: https://www.instagram.com/webstreet_code/

DDD
DDDasal
2024-12-03 06:22:13901semak imbas

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>

Atas ialah kandungan terperinci Neon Random Shape Generator menggunakan kod javascript ikuti kami di instagram: https://www.instagram.com/webstreet_code/. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript using https
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah Saya Boleh Mengira Nilai Pendua dengan Cekap dalam Tatasusunan JavaScript?Artikel seterusnya：Bagaimanakah Saya Boleh Mengira Nilai Pendua dengan Cekap dalam Tatasusunan JavaScript?

Artikel berkaitan

Lihat lagi