OBJUI

1010流动动画背景

2025-10-14 20:33:58 58

黑客风格1010流动动画背景

下面是一个黑色背景、绿色数字流动的黑客风格动画效果，非常适合作为网站背景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑客风格1010流动背景</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #000;
            color: #0f0;
            font-family: 'Courier New', monospace;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .matrix-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .binary-digit {
            position: absolute;
            color: #0f0;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 18px;
            text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
            user-select: none;
            opacity: 0;
            animation: matrixFall linear infinite;
        }

        /* 不同大小的数字 */
        .binary-digit.small {
            font-size: 14px;
            opacity: 0.4;
        }

        .binary-digit.medium {
            font-size: 18px;
            opacity: 0.7;
        }

        .binary-digit.large {
            font-size: 24px;
            opacity: 1;
        }

        /* 不同的动画速度和延迟 */
        .binary-digit.slow {
            animation-duration: 15s;
        }

        .binary-digit.medium-speed {
            animation-duration: 10s;
        }

        .binary-digit.fast {
            animation-duration: 5s;
        }

        /* 矩阵下落动画 */
        @keyframes matrixFall {
            0% {
                transform: translateY(-100px) rotate(0deg);
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* 内容区域 */
        .content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 100px auto;
            padding: 40px;
            background: rgba(0, 15, 0, 0.3);
            border: 1px solid #0f0;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
            backdrop-filter: blur(5px);
        }

        .content h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 0 0 10px #0f0;
            letter-spacing: 3px;
        }

        .content p {
            line-height: 1.6;
            margin-bottom: 20px;
            font-size: 1.1em;
        }

        .terminal {
            background: rgba(0, 20, 0, 0.5);
            border: 1px solid #0f0;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
        }

        .terminal .prompt {
            color: #0f0;
        }

        .terminal .command {
            color: #0f0;
            margin-left: 10px;
        }

        .terminal .output {
            color: #0f0;
            margin-top: 10px;
        }

        .blink {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .content {
                margin: 50px 20px;
                padding: 20px;
            }
            
            .content h1 {
                font-size: 1.8em;
            }
            
            .binary-digit {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="matrix-background" id="matrixBackground"></div>
    
    <div class="content">
        <h1>SYSTEM TERMINAL</h1>
        
        <div class="terminal">
            <div>
                <span class="prompt">user@system:~$</span>
                <span class="command">whoami</span>
            </div>
            <div class="output">admin</div>
            
            <div style="margin-top: 15px;">
                <span class="prompt">user@system:~$</span>
                <span class="command">status --security</span>
            </div>
            <div class="output">SYSTEM SECURE <span class="blink">█</span></div>
            
            <div style="margin-top: 15px;">
                <span class="prompt">user@system:~$</span>
                <span class="command">_</span>
            </div>
        </div>
        
        <p>系统运行正常。所有安全协议已激活。监控中...</p>
        <p>检测到 1010 数据流模式。数据加密级别：MAXIMUM</p>
    </div>

    <script>
        // 创建矩阵数字元素
        function createMatrixDigits() {
            const container = document.getElementById('matrixBackground');
            const digits = ['0', '1'];
            const sizeClasses = ['small', 'medium', 'large'];
            const speedClasses = ['slow', 'medium-speed', 'fast'];
            
            // 创建200个数字元素
            for (let i = 0; i < 200; i++) {
                const digit = document.createElement('div');
                digit.className = `binary-digit ${sizeClasses[Math.floor(Math.random() * sizeClasses.length)]} ${speedClasses[Math.floor(Math.random() * speedClasses.length)]}`;
                digit.textContent = digits[Math.floor(Math.random() * digits.length)];
                digit.style.left = `${Math.random() * 100}vw`;
                digit.style.animationDelay = `${Math.random() * 15}s`;
                container.appendChild(digit);
            }
        }

        // 页面加载完成后创建数字
        document.addEventListener('DOMContentLoaded', createMatrixDigits);
        
        // 添加随机闪烁效果
        function addRandomFlicker() {
            const digits = document.querySelectorAll('.binary-digit');
            if (digits.length > 0) {
                const randomDigit = digits[Math.floor(Math.random() * digits.length)];
                randomDigit.style.opacity = Math.random() > 0.5 ? '1' : '0.3';
                
                // 随机改变一些数字
                if (Math.random() > 0.8) {
                    randomDigit.textContent = Math.random() > 0.5 ? '0' : '1';
                }
            }
            
            setTimeout(addRandomFlicker, 100);
        }
        
        // 启动闪烁效果
        setTimeout(addRandomFlicker, 2000);
    </script>
</body>
</html>

下面是修改后的代码，数字0和1整齐排列，然后随机往下流动：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑客风格1010流动背景</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #000;
            color: #0f0;
            font-family: 'Courier New', monospace;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .matrix-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            display: flex;
            justify-content: space-around;
        }

        .binary-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 30px;
        }

        .binary-digit {
            color: #0f0;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 18px;
            text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
            user-select: none;
            opacity: 0;
            animation: matrixFall linear infinite;
            margin: 2px 0;
        }

        /* 不同大小的数字 */
        .binary-digit.small {
            font-size: 14px;
            opacity: 0.4;
        }

        .binary-digit.medium {
            font-size: 18px;
            opacity: 0.7;
        }

        .binary-digit.large {
            font-size: 24px;
            opacity: 1;
        }

        /* 不同的动画速度 */
        .binary-digit.slow {
            animation-duration: 15s;
        }

        .binary-digit.medium-speed {
            animation-duration: 10s;
        }

        .binary-digit.fast {
            animation-duration: 5s;
        }

        /* 矩阵下落动画 */
        @keyframes matrixFall {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                transform: translateY(100vh);
                opacity: 0;
            }
        }

        /* 内容区域 */
        .content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 100px auto;
            padding: 40px;
            background: rgba(0, 15, 0, 0.3);
            border: 1px solid #0f0;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
            backdrop-filter: blur(5px);
        }

        .content h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 0 0 10px #0f0;
            letter-spacing: 3px;
        }

        .content p {
            line-height: 1.6;
            margin-bottom: 20px;
            font-size: 1.1em;
        }

        .terminal {
            background: rgba(0, 20, 0, 0.5);
            border: 1px solid #0f0;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
        }

        .terminal .prompt {
            color: #0f0;
        }

        .terminal .command {
            color: #0f0;
            margin-left: 10px;
        }

        .terminal .output {
            color: #0f0;
            margin-top: 10px;
        }

        .blink {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .content {
                margin: 50px 20px;
                padding: 20px;
            }
            
            .content h1 {
                font-size: 1.8em;
            }
            
            .binary-digit {
                font-size: 14px;
            }
            
            .binary-column {
                width: 25px;
            }
        }
    </style>
</head>
<body>
    <div class="matrix-background" id="matrixBackground"></div>
    
    <div class="content">
        <h1>MATRIX DATA STREAM</h1>
        
        <div class="terminal">
            <div>
                <span class="prompt">system@matrix:~$</span>
                <span class="command">status --dataflow</span>
            </div>
            <div class="output">BINARY STREAM ACTIVE</div>
            
            <div style="margin-top: 15px;">
                <span class="prompt">system@matrix:~$</span>
                <span class="command">analyze --pattern</span>
            </div>
            <div class="output">101010101010101010101010101010</div>
            
            <div style="margin-top: 15px;">
                <span class="prompt">system@matrix:~$</span>
                <span class="command">_</span>
            </div>
        </div>
        
        <p>数据流模式：垂直二进制序列</p>
        <p>检测到 32 个数据列，每个列包含 20 个二进制单元</p>
        <p>传输状态：<span style="color:#0f0;">ACTIVE</span> <span class="blink">█</span></p>
    </div>

    <script>
        // 创建矩阵数字元素
        function createMatrixDigits() {
            const container = document.getElementById('matrixBackground');
            const digits = ['0', '1'];
            const sizeClasses = ['small', 'medium', 'large'];
            const speedClasses = ['slow', 'medium-speed', 'fast'];
            
            // 创建32列
            for (let col = 0; col < 32; col++) {
                const column = document.createElement('div');
                column.className = 'binary-column';
                
                // 每列创建20个数字
                for (let row = 0; row < 20; row++) {
                    const digit = document.createElement('div');
                    digit.className = `binary-digit ${sizeClasses[Math.floor(Math.random() * sizeClasses.length)]} ${speedClasses[Math.floor(Math.random() * speedClasses.length)]}`;
                    digit.textContent = digits[Math.floor(Math.random() * digits.length)];
                    digit.style.animationDelay = `${Math.random() * 10}s`;
                    column.appendChild(digit);
                }
                
                container.appendChild(column);
            }
        }

        // 页面加载完成后创建数字
        document.addEventListener('DOMContentLoaded', createMatrixDigits);
        
        // 添加随机闪烁效果
        function addRandomFlicker() {
            const digits = document.querySelectorAll('.binary-digit');
            if (digits.length > 0) {
                const randomDigit = digits[Math.floor(Math.random() * digits.length)];
                
                // 随机改变一些数字
                if (Math.random() > 0.7) {
                    randomDigit.textContent = Math.random() > 0.5 ? '0' : '1';
                }
                
                // 随机改变一些数字的亮度
                if (Math.random() > 0.8) {
                    randomDigit.style.opacity = Math.random() > 0.5 ? '1' : '0.3';
                }
            }
            
            setTimeout(addRandomFlicker, 100);
        }
        
        // 启动闪烁效果
        setTimeout(addRandomFlicker, 2000);
    </script>
</body>
</html>
更多精彩，请关注公众号

微信公众号

热门文章:
PHP合成图片
揭秘JavaScript中高效实现搜索关键词联想功能的机制
JavaScript数组操作全攻略：从创建到查询，详解增加、更新、删除元素
使用Axios+PHP+JWT实现登录认证
深入解析Web开发中的跨域问题及其解决方案
JavaScript实现自定义信息弹窗
CSS box-shadow 属性详解：如何为元素添加精美阴影效果
javascript写一个前端在线运行环境
JavaScript实现滑动验证码
module.exports、export default 和 export 详解
Vuex：Vue.js应用程序的集中式状态管理解决方案
A-frame 实现海浪效果
JavaScript 异步操作之Promise详解与优缺点
JavaScript之Date 对象剖析
JavaScript之DOM剖析
Uniapp虚拟滚动商品分类页面实现
Nuxt3中的封装连接mysql和redis
CentOS 7 上独立安装 Python 3.8
Go 语言定时任务 4 种常用方法
使用 Docker 快速搭建 PHP 全栈开发环境