当前位置：首页 > article >正文

永夜星河主题特效2（星河背景 + 闪烁文字+点击星星 + 文字弹出特效）

article 2024/11/17 23:46:24

图片展示

星河背景 + 闪烁文字+点击星星 + 文字弹出特效

特效介绍：

使用方式：

图片展示

星河背景 + 闪烁文字+点击星星 + 文字弹出特效

<!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;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to bottom, #0d1b2a, #1b263b, #415a77);
            overflow: hidden;
            color: white;
            font-family: 'Arial', sans-serif;
            position: relative;
            /* background: url('yyxhbk2.png') no-repeat center */
        }
        /* 星星文字标题 */
        
        h1 {
            font-size: 3rem;
            text-shadow: 0 0 10px #ffffff, 0 0 20px #e0e4ff;
            animation: glow 2s infinite alternate;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 5px #ffffff, 0 0 10px #e0e4ff;
            }
            to {
                text-shadow: 0 0 15px #ffffff, 0 0 30px #e0e4ff;
            }
        }
        /* 点击文字提示 */
        
        .message {
            position: absolute;
            bottom: 10%;
            font-size: 1.2rem;
            text-align: center;
            opacity: 0;
            transition: opacity 1s ease;
        }
        /* 星星特效 */
        
        .star {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 0 8px #fff;
            animation: fade-out 2s forwards ease;
        }
        
        @keyframes fade-out {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px) scale(2);
            }
        }
        
        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>
    <h1>欢迎来到你的永夜星河！</h1>
    <div class="message">点击屏幕，看看星星有什么秘密~</div>

    <script>
        // 页面加载时，显示提示信息
        const message = document.querySelector('.message');
        setTimeout(() => {
            message.style.opacity = 1;
        }, 1000);

        // 点击页面触发星星和文字特效
        document.body.addEventListener('click', (e) => {
            // 创建星星
            const star = document.createElement('div');
            star.classList.add('star');
            star.style.left = `${e.clientX}px`;
            star.style.top = `${e.clientY}px`;
            document.body.appendChild(star);

            // 移除星星动画
            setTimeout(() => {
                star.remove();
            }, 2000);

            // 显示动态文字
            const text = document.createElement('div');
            text.style.position = 'absolute';
            text.style.left = `${e.clientX}px`;
            text.style.top = `${e.clientY - 30}px`;
            text.style.color = 'white';
            text.style.fontSize = '1.2rem';
            text.style.fontWeight = 'bold';
            text.textContent = getRandomText();
            document.body.appendChild(text);

            // 移除文字
            setTimeout(() => {
                text.remove();
            }, 2000);
        });

        // 随机文字生成
        function getRandomText() {
            const texts = [
                '你是我心中的星河女主角！',
                '星星为你闪烁！',
                '祝你每天开心！',
                '你的笑容点亮我的星空！',
                '你是人间宝藏~',
                '今天也要元气满满哦！',
            ];
            return texts[Math.floor(Math.random() * texts.length)];
        }
    </script>
</body>

</html>

特效介绍：

星星点击特效：
- 点击页面时，会在鼠标位置生成一颗星星，慢慢变大并消失，模拟星星散落的效果。
- 星星使用 div 和 CSS 动画实现，配合鼠标点击事件动态生成。
动态文字彩蛋：
- 点击后随机显示一句温暖的“彩蛋文字”，比如“你是我心中的星河女主角！”、“星星为你闪烁！”等。
- 文字位置根据鼠标点击动态生成，显示后自动消失。
视觉效果：
- 页面背景使用渐变模拟夜空，标题文字带有“光晕”效果。
- 特效简单又有趣，文字内容可以根据对方喜好自定义，增强专属感。