Maison >interface Web >js tutoriel >Cursor Trail utilisant html css js #virals #js #html #css #work

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

DDDoriginal: 2024-10-03 22:22:02934parcourir

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>

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!

css html using JS

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：Explorer le développement et l'impact des plateformes NFTArticle suivant：Explorer le développement et l'impact des plateformes NFT

Articles Liés

Voir plus