Home >Web Front-end >JS Tutorial >Cursor Trail using html css js #virals #js #html #css #work

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

DDDOriginal: 2024-10-03 22:22:02935browse

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>

The above is the detailed content of Cursor Trail using html css js #virals #js #html #css #work. For more information, please follow other related articles on the PHP Chinese website!

css html using JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Exploring the Development and Impact of NFT PlatformsNext article：Exploring the Development and Impact of NFT Platforms

See more

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

Code

Related articles