网站打字机公告，弹窗内容代码，HTML,CSS,JS

技术教程

一言准备中...

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牛奶白黑客风格打字机</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            overflow: hidden;
        }

        .terminal {
            width: 90%;
            max-width: 800px;
            background-color: rgba(255, 253, 245, 0.9);
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 15px rgba(255, 253, 245, 0.5);
            position: relative;
            overflow: hidden;
        }

        .terminal::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: linear-gradient(to bottom, rgba(255,253,245,1), rgba(255,253,245,0.7));
            border-radius: 5px 5px 0 0;
        }

        .terminal-header {
            position: relative;
            height: 25px;
            margin-bottom: 15px;
        }

        .terminal-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: #333;
            font-weight: bold;
        }

        .terminal-body {
            color: #333;
            line-height: 1.5;
        }

        .typing-text {
            border-right: 2px solid #333;
            animation: blink 0.7s step-end infinite;
            white-space: pre-wrap;
            min-height: 60px;
        }

        @keyframes blink {
            from, to { border-color: transparent; }
            50% { border-color: #333; }
        }

        .cursor {
            display: inline-block;
            width: 10px;
            height: 20px;
            background-color: #333;
            vertical-align: middle;
            margin-left: 2px;
            animation: blink 0.7s step-end infinite;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .terminal {
                width: 95%;
                padding: 15px;
            }

            .typing-text {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="terminal">
        <div class="terminal-header">
            <div class="terminal-title">SYSTEM NOTIFICATION</div>
        </div>
        <div class="terminal-body">
            <div id="typing" class="typing-text"></div>
            <span class="cursor"></span>
        </div>
    </div>

    <script>
        const text = "重要公告：\n\n系统检测到新版本可用 (v2.5.0)\n\n更新内容：\n- 安全性增强\n- 性能优化\n- 用户体验改进\n\n建议在24小时内完成更新。\n\n输入 'update now' 立即执行更新...";
        const typingElement = document.getElementById('typing');
        let i = 0;
        let line = 0;
        const lines = text.split('\n');

        function typeWriter() {
            if (line < lines.length) {
                if (i < lines[line].length) {
                    typingElement.innerHTML += lines[line].charAt(i);
                    i++;
                    setTimeout(typeWriter, Math.random() * 50 + 30);
                } else {
                    typingElement.innerHTML += '<br>';
                    line++;
                    i = 0;
                    setTimeout(typeWriter, 300);
                }
            }
        }

        // 开始打字效果
        setTimeout(typeWriter, 500);

        // 模拟终端闪烁效果
        setInterval(() => {
            document.querySelector('.terminal').style.boxShadow = 
                `0 0 ${Math.random() * 10 + 5}px rgba(255, 253, 245, ${Math.random() * 0.5 + 0.5})`;
        }, 300);
    </script>
</body>
</html>

最近访客