<!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>
以上是光标轨迹部分 tml css js的详细内容。更多信息请关注PHP中文网其他相关文章！
