JS星星闪动特效如何实现？

要实现JavaScript星星闪动特效,我们可以通过创建动态的星星元素，结合CSS动画和JavaScript控制，让星星在页面上随机出现、闪烁并逐渐消失，以下是详细的实现步骤和代码示例。

（图片来源网络，侵删）

基础思路

创建星星元素：使用JavaScript动态生成div元素，并设置其样式为星星形状。
随机定位：让星星在页面的随机位置出现。
动画效果：通过CSS动画实现星星的闪烁和淡入淡出效果。
生命周期控制：设置星星的显示时间，并在动画结束后移除元素。

具体实现步骤

HTML结构

在HTML中创建一个容器,用于放置星星：

<div id="star-container"></div>

CSS样式

为星星设置基本样式和动画效果：

#star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

JavaScript逻辑

编写JavaScript代码来动态生成星星并控制其行为：

document.addEventListener('DOMContentLoaded', function() {
    const starContainer = document.getElementById('star-container');
    const starCount = 50; // 星星数量
    // 创建星星
    function createStar() {
        const star = document.createElement('div');
        star.className = 'star';
        // 随机位置
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;
        star.style.left = x + 'px';
        star.style.top = y + 'px';
        // 随机动画延迟和持续时间
        const delay = Math.random() * 2;
        const duration = 1 + Math.random() * 2;
        star.style.animationDelay = delay + 's';
        star.style.animationDuration = duration + 's';
        starContainer.appendChild(star);
        // 动画结束后移除星星
        setTimeout(() => {
            star.remove();
        }, (delay + duration) * 1000);
    }
    // 初始化星星
    for (let i = 0; i < starCount; i++) {
        setTimeout(() => {
            createStar();
        }, Math.random() * 2000);
    }
    // 持续创建新星星
    setInterval(createStar, 300);
});

优化与扩展

调整星星数量和频率

通过修改starCount和setInterval的时间间隔，可以控制星星的密度和出现频率。

（图片来源网络，侵删）

多种星星样式

可以创建不同大小和颜色的星星,增加视觉效果：

function getRandomStarStyle() {
    const sizes = [2, 3, 4, 5];
    const colors = ['#ffffff', '#ffffcc', '#ccffff', '#ffccff'];
    return {
        size: sizes[Math.floor(Math.random() * sizes.length)],
        color: colors[Math.floor(Math.random() * colors.length)]
    };
}
// 在createStar函数中应用样式
const style = getRandomStarStyle();
star.style.width = style.size + 'px';
star.style.height = style.size + 'px';
star.style.background = style.color;
star.style.boxShadow = `0 0 ${style.size * 2}px ${style.color}`;

响应式设计

确保星星在不同屏幕尺寸下正常显示：

window.addEventListener('resize', function() {
    // 可以在这里添加重新定位星星的逻辑
});

性能优化

限制星星数量：避免过多星星导致性能问题。
使用requestAnimationFrame：对于更复杂的动画，可以考虑使用requestAnimationFrame代替setInterval。
对象池技术：复用星星元素，减少DOM操作。

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Stars Twinkling Effect</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
        }
        #star-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .star {
            position: absolute;
            border-radius: 50%;
            animation: twinkle linear infinite;
        }
        @keyframes twinkle {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
            100% {
                opacity: 0;
                transform: scale(0.5);
            }
        }
    </style>
</head>
<body>
    <div id="star-container"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const starContainer = document.getElementById('star-container');
            const starCount = 100;
            function createStar() {
                const star = document.createElement('div');
                star.className = 'star';
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight;
                star.style.left = x + 'px';
                star.style.top = y + 'px';
                const size = Math.random() * 3 + 1;
                star.style.width = size + 'px';
                star.style.height = size + 'px';
                star.style.background = '#fff';
                star.style.boxShadow = `0 0 ${size * 2}px #fff`;
                const duration = Math.random() * 3 + 1;
                const delay = Math.random() * 2;
                star.style.animationDuration = duration + 's';
                star.style.animationDelay = delay + 's';
                starContainer.appendChild(star);
                setTimeout(() => {
                    star.remove();
                }, (delay + duration) * 1000);
            }
            for (let i = 0; i < starCount; i++) {
                setTimeout(createStar, Math.random() * 2000);
            }
            setInterval(createStar, 200);
        });
    </script>
</body>
</html>