鼠标跟随星星动画特效
https://www.bootstrapmb.com/item/14781
创建一个鼠标跟随的星星动画特效在JavaScript中通常涉及到HTML、CSS和JavaScript的结合。以下是一个简单的步骤说明和示例代码，用于创建一个基本的鼠标跟随星星动画：
HTML (index.html)
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标跟随星星动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="stars-container">
<!-- 星星将在这里动态生成 -->
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
css#stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none; /* 防止星星阻止鼠标事件 */
}
.star {
position: absolute;
width: 20px;
height: 20px;
background: yellow;
border-radius: 50%;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
/* 可以添加更多CSS样式来美化星星，如阴影、大小变化等 */JavaScript (script.js)
javascriptconst starsContainer = document.getElementById('stars-container');
let stars = [];
// 初始化一定数量的星星
function initStars(numStars) {
for (let i = 0; i < numStars; i++) {
const star = document.createElement('div');
star.classList.add('star');
// 随机位置
star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`;
// 添加到容器中
starsContainer.appendChild(star);
// 添加到星星数组中
stars.push(star);
}
}
// 跟随鼠标移动
function followMouse(e) {
const x = e.clientX / window.innerWidth * 100;
const y = e.clientY / window.innerHeight * 100;
stars.forEach(star => {
const dx = x - parseFloat(star.style.left);
const dy = y - parseFloat(star.style.top);
// 使用简单的物理公式来模拟跟随效果
const speed = 0.02; // 可以调整这个值来改变跟随速度
const tx = star.style.left = `${star.style.left.slice(0, -2) + (dx * speed)}vw`;
const ty = star.style.top = `${star.style.top.slice(0, -2) + (dy * speed)}vh`;
// 可以添加额外的动画效果，如闪烁、大小变化等
});
}
// 监听鼠标移动事件
document.addEventListener('mousemove', followMouse);
// 初始化星星
initStars(100); // 可以调整这个值来改变星星的数量在这个例子中，我们首先定义了一个包含星星的容器，然后在JavaScript中动态地创建并添加了星星元素。我们使用CSS来设置星星的样式，如大小、颜色和形状。然后，我们使用JavaScript来监听鼠标移动事件，并根据鼠标的位置来更新星星的位置，从而创建出一个跟随鼠标的动画效果。
请注意，这只是一个基本的示例，你可以根据自己的需求来添加更多的功能和样式，如星星的闪烁、旋转、大小变化等。
