永夜星河主题特效（星河背景 + 闪烁文字）

命运之光

发布于 2024-11-17 04:32:26

4600

文章被收录于专栏：我在本科期间写的文章我在本科期间写的文章

图片展示

如果想用前端写一个好看的特效，可以做一个《永夜星河》主题的网页特效，比如星河背景、动态文字、浮动的角色元素等。以下是一个示例，展示星空背景和动态文字特效，同时可以加入与电视剧主题相关的元素。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>永夜星河主题特效</title>
    <style>
        /* 星河背景 */
        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle, #1a2a6c, #b21f1f, #fdbb2d);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 星星点点 */
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 闪烁文字 */
        .title {
            font-size: 3em;
            font-weight: bold;
            text-transform: uppercase;
            text-shadow: 0 0 20px #fff, 0 0 30px #ff9, 0 0 40px #ff9;
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 10px #fff, 0 0 20px #ff9, 0 0 30px #ff9;
            }
            to {
                text-shadow: 0 0 30px #ff9, 0 0 50px #ff9, 0 0 70px #ff9;
            }
        }

        /* 动态漂浮图片 */
        .character {
            position: absolute;
            bottom: 10%;
            width: 150px;
            animation: float 4s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
<body>
    <!-- 星河背景 -->
    <canvas id="stars"></canvas>

    <!-- 闪烁文字 -->
    <div class="title">永夜星河</div>

    <!-- 动态漂浮角色 -->
    <img src="character.png" alt="角色" class="character">

    <script>
        // 星星特效
        const canvas = document.getElementById('stars');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let stars = [];
        const numStars = 100;

        // 初始化星星
        for (let i = 0; i < numStars; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 1.5,
                speed: Math.random() * 0.5
            });
        }

        // 绘制星星
        function drawStars() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'white';
            stars.forEach(star => {
                ctx.beginPath();
                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
                ctx.fill();
                star.y += star.speed;
                if (star.y > canvas.height) {
                    star.y = 0;
                }
            });
            requestAnimationFrame(drawStars);
        }

        drawStars();
    </script>
</body>
</html>