鼠标小星星拖尾效果

原创已于 2025-06-27 14:16:34 修改 · 322 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-21 16:51:47 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标小星星拖尾效果</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
cursor: none;
height: 100vh;
}

.star {
position: absolute;
width: 10px;
height: 10px;
background: radial-gradient(circle, #fff 30%, transparent 70%);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
filter: blur(1px);
animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5);
}
}

.link {
position: fixed;
bottom: 20px;
right: 20px;
color: white;
font-family: Arial, sans-serif;
text-decoration: none;
z-index: 1000;
}
</style>
</head>
<body>

<script>
document.addEventListener('DOMContentLoaded', function() {
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const body = document.body;
let stars = [];
let mouseX = 0;
let mouseY = 0;

// 跟踪鼠标位置
document.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
createStar(mouseX, mouseY);
});

// 创建星星
function createStar(x, y) {
const star = document.createElement('div');
star.className = 'star';

// 随机大小和颜色
const size = Math.random() * 8 + 4;
const color = colors[Math.floor(Math.random() * colors.length)];

star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.background = `radial-gradient(circle, ${color} 30%, transparent 70%)`;
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.animationDuration = `${Math.random() * 0.5 + 0.5}s`;

body.appendChild(star);
stars.push(star);

// 移除星星
setTimeout(() => {
star.remove();
stars = stars.filter(s => s !== star);
}, 1000);
}

// 自动生成一些星星
function autoGenerateStars() {
if (Math.random() > 0.7) {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createStar(x, y);
}
requestAnimationFrame(autoGenerateStars);
}

autoGenerateStars();
});
</script>
</body>
</html>