suchen

Heim  >  Artikel  >  Web-Frontend  >  Cursor-Trail-Teil TML CSS JS

Cursor-Trail-Teil TML CSS JS

Linda Hamilton
Linda HamiltonOriginal
2024-10-08 06:17:30321Durchsuche

Cursor trail part tml css js

Code ist: 

<!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>

Das obige ist der detaillierte Inhalt vonCursor-Trail-Teil TML CSS JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 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：API-Testgenerator: Ein umfassender LeitfadenNächster Artikel：API-Testgenerator: Ein umfassender Leitfaden

In Verbindung stehende Artikel

Mehr sehen