以下是一个简单的动态星空背景特效代码，使用了Canvas和requestAnimationFrame函数：

<!DOCTYPE html>
<html>
<head>
    <title>动态星空背景特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // 获取canvas元素和上下文
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        // 设置canvas宽高
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 定义星星数量和大小范围
        var numStars = 100;
        var minSize = 1;
        var maxSize = 3;

        // 定义星星数组
        var stars = [];

        // 创建星星对象
        function createStar() {
            var star = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                size: Math.random() * (maxSize - minSize) + minSize,
                speed: Math.random() * 0.1 + 0.05
            };
            return star;
        }

        // 初始化星星数组
        for (var i = 0; i < numStars; i++) {
            stars.push(createStar());
        }

        // 绘制星星
        function drawStar(star) {
            ctx.beginPath();
            ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
            ctx.fillStyle = '#fff';
            ctx.fill();
        }

        // 更新星星位置
        function updateStar(star) {
            star.x -= star.speed;
            if (star.x < -star.size) {
                star.x = canvas.width + star.size;
                star.y = Math.random() * canvas.height;
            }
        }

        // 动画循环
        function animate() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制和更新星星
            for (var i = 0; i < numStars; i++) {
                drawStar(stars[i]);
                updateStar(stars[i]);
            }

            // 循环调用动画函数
            requestAnimationFrame(animate);
        }

        // 开始动画
        animate();
    </script>
</body>
</html>

这个代码会在页面中创建一个Canvas元素，并在其中绘制一些随机移动的白色圆点，模拟星空的效果。可以通过调整numStars、minSize和maxSize等参数来改变星星的数量和大小范围。

标签：