星星飘落特效

最新推荐文章于 2025-07-10 21:17:09 发布

ziblog

最新推荐文章于 2025-07-10 21:17:09 发布

阅读量363

点赞数 5

CC 4.0 BY-SA版权

文章标签：特效前端

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148978827

<!DOCTYPE html>
<html lang="zh">
<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: pointer;
height: 100vh;
}

.star {
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation: fall linear;
}

@keyframes fall {
to {
transform: translateY(100vh);
opacity: 0;
}
}

.link {
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 12px;
text-decoration: none;
}
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const body = document.body;

// 插入链接
const link = document.createElement('a');
link.href = 'https://a.88a.org.cn/uxtN';
link.className = 'link';
link.textContent = '更多特效';
link.target = '_blank';
body.appendChild(link);

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

// 随机大小
const size = Math.random() * 5 + 2;
star.style.width = `${size}px`;
star.style.height = `${size}px`;

// 随机颜色
const colors = ['#fff', '#ff0', '#f0f', '#0ff', '#f00', '#0f0', '#00f'];
star.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

// 初始位置
star.style.left = `${e.clientX}px`;
star.style.top = `${e.clientY}px`;

// 随机动画持续时间
const duration = Math.random() * 3 + 1;
star.style.animationDuration = `${duration}s`;

// 随机延迟
star.style.animationDelay = `${Math.random() * 0.5}s`;

// 随机透明度
star.style.opacity = Math.random() * 0.8 + 0.2;

body.appendChild(star);

// 动画结束后移除星星
star.addEventListener('animationend', function() {
star.remove();
});
}

// 鼠标移动时创建星星
document.addEventListener('mousemove', function(e) {
// 随机创建1-3个星星
const count = Math.floor(Math.random() * 3) + 1;
for (let i = 0; i < count; i++) {
setTimeout(() => {
createStar(e);
}, i * 100);
}
});
});
</script>
</body>
</html>