Maison >interface Web >js tutoriel >Partie du chemin du curseur tml css js

Partie du chemin du curseur tml css js

Linda Hamiltonoriginal: 2024-10-08 06:17:30363parcourir

Cursor trail part tml css js

Le code est :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color-Selectable 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: #333;
      font-family: monospace;
      flex-direction: column; /* Allow elements to stack vertically */
    }
    .terminal {
      position: relative;
      width: 400px;
      height: 300px;
      background-color: #1e1e1e;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid #444;
      padding: 20px;
      cursor: none;
      transition: background-color 0.3s ease;
    }
    .trail {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7); /* Placeholder color, dynamically changed */
      box-shadow: 0 0 5px 6px white; /* Will change based on selected color */
      pointer-events: none;
      animation: fade 4s linear forwards;
    }
    @keyframes fade {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0); }
    }
    .controls {
      display: flex;
      position: absolute;
      bottom: 10px;
      gap: 20px; /* Spacing between color pickers */
      margin-top: 20px; /* Space between terminal and color pickers */
      color: white;
    }
    .color-picker {
      padding: 5px 10px;
      font-size: 14px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="terminal" id="terminalBox">
</div>
<div class="controls">
  <label for="backgroundPicker">Background Color:</label>
  <input type="color" id="backgroundPicker" class="color-picker" value="#1e1e1e">

  <label for="colorPicker">Cursor Trail Color:</label>
  <input type="color" id="colorPicker" class="color-picker" value="#0f0bd4">
</div>

  <script>
    const terminalBox = document.getElementById('terminalBox');
    const colorPicker = document.getElementById('colorPicker');
    const backgroundPicker = document.getElementById('backgroundPicker');
    let trailColor = '#0f0bd4'; // Default trail color

    // Update cursor trail color when user picks a color
    colorPicker.addEventListener('input', (e) => {
      trailColor = e.target.value;
    });

    // Update terminal background color when user picks a color
    backgroundPicker.addEventListener('input', (e) => {
      terminalBox.style.backgroundColor = e.target.value;
    });

    // Create cursor-following particle effect with selected color
    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 - 7.5}px`; // Center the circle
      trail.style.top = `${e.clientY - rect.top - 7.5}px`;

      // Change the trail color based on selected color
      trail.style.backgroundColor = trailColor;
      trail.style.boxShadow = `0 0 5px 2px ${trailColor}`;

      // 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 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：Générateur de tests API : un guide completArticle suivant：Générateur de tests API : un guide complet

Articles Liés

Voir plus