Heim > Artikel > Web-Frontend > Cursor Trail mit HTML CSS JS #virals #js #html #css #work

Cursor Trail mit HTML CSS JS #virals #js #html #css #work

DDDOriginal: 2024-10-03 22:22:02919Durchsuche

Cursor Trail using html css js #virals #js #html #css #work

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,
   initial-scale=1.0">
  <title>Cursor Trail Effect</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #2c2a2a;
      font-family: monospace;
    }
    .terminal {
      position: relative;
      width: 450px;
      height: 500px;
      background-color: #1e1e1e;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid #444;
      padding: 20px;
      cursor: none;
    }
    .terminal::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 15px;
      display: flex;
      gap: 10px;
    }
    .terminal::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      width: 10px;
      height: 10px;
      background-color: yellow;
      border-radius: 50%;
      box-shadow: 20px 0 0 red, 40px 0 0 blue;
    }
    .trail {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: rgba(15, 11, 212, 0.7);
      box-shadow: 0 0 2px 2px white;
      pointer-events: none;
      animation: fade 3s linear forwards;
    }
    @keyframes fade {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0); }
    }
    .instructions {
      color: #fff;
      position: absolute;
      bottom: 10px;
      left: 20px;
    }
  </style>
</head>
<body>
  <div class="terminal" id="terminalBox">
    <div class="instructions">Move your cursor inside the box to see the trail effect</div>
  </div>

  <script>
    const terminalBox = document.getElementById('terminalBox');

    // Create the rope-like effect by generating multiple particles
    terminalBox.addEventListener('mousemove', (e) => {
      const rect = terminalBox.getBoundingClientRect();

      // Create a small circle (trail)
      const trail = document.createElement('div');
      trail.className = 'trail';
      terminalBox.appendChild(trail);

      // Set the trail position relative to the terminal box
      trail.style.left = `${e.clientX - rect.left - 5}px`; // -5 to center the circle
      trail.style.top = `${e.clientY - rect.top - 5}px`;

      // Remove the trail element after the animation ends
      setTimeout(() => trail.remove(), 1000);  // The time here matches the animation duration in CSS
    });
  </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonCursor Trail mit HTML CSS JS #virals #js #html #css #work. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html using JS

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：Erkundung der Entwicklung und Auswirkungen von NFT-PlattformenNächster Artikel：Erkundung der Entwicklung und Auswirkungen von NFT-Plattformen

In Verbindung stehende Artikel

Mehr sehen