three实现赛博朋克风格的三维科技数据连接动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现赛博朋克风格的三维科技数据连接动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&display=swap');
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        overflow: hidden;
        background: #000;
        font-family: 'Orbitron', monospace;
        color: #00ff88;
    }

    #container {
        position: fixed;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg,
            #000506 0%,
            #001122 25%,
            #000814 50%,
            #001a0a 75%,
            #000208 100%
        );
    }

    .grid-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.04;
        background-image: 
            linear-gradient(rgba(0, 255, 136, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 136, 0.1) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: gridShift 20s linear infinite;
    }

    @keyframes gridShift {
        0% { transform: translate(0, 0); }
        100% { transform: translate(50px, 50px); }
    }

    .scan-line {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            #00ff88 40%,
            #88ffaa 50%, 
            #00ff88 60%,
            transparent 100%);
        box-shadow: 
            0 0 30px #00ff88,
            0 0 60px rgba(0, 255, 136, 0.6),
            0 0 100px rgba(0, 255, 136, 0.3);
        animation: scanMove 3s ease-in-out infinite;
    }

    @keyframes scanMove {
        0%, 100% { top: 0%; opacity: 0; }
        10%, 90% { opacity: 1; }
        50% { top: 100%; }
    }

    .tech-pattern {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.02;
        background-image: 
            radial-gradient(circle at 25% 25%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(0, 136, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 50% 50%, rgba(255, 0, 136, 0.05) 0%, transparent 70%);
        animation: techPulse 8s ease-in-out infinite;
    }

    @keyframes techPulse {
        0%, 100% { opacity: 0.02; transform: scale(1); }
        50% { opacity: 0.06; transform: scale(1.1); }
    }

    .circuit-lines {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.08;
        background-image: 
            linear-gradient(45deg, transparent 40%, rgba(0, 255, 136, 0.1) 41%, rgba(0, 255, 136, 0.1) 42%, transparent 43%),
            linear-gradient(-45deg, transparent 40%, rgba(0, 136, 255, 0.1) 41%, rgba(0, 136, 255, 0.1) 42%, transparent 43%);
        background-size: 200px 200px;
        animation: circuitFlow 15s linear infinite;
    }

    @keyframes circuitFlow {
        0% { background-position: 0px 0px, 0px 0px; }
        100% { background-position: 200px 200px, -200px 200px; }
    }

    #hud {
        position: fixed;
        top: 20px;
        left: 20px;
        font-size: 14px;
        color: #00ff88;
        text-transform: uppercase;
        letter-spacing: 2px;
        z-index: 100;
        background: rgba(0, 0, 0, 0.7);
        padding: 15px 20px;
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 20px;
        font-weight: 500;
        backdrop-filter: blur(30px);
        box-shadow: 
            0 0 20px rgba(0, 255, 136, 0.3),
            inset 0 1px 0 rgba(0, 255, 136, 0.2),
            inset 0 0 20px rgba(0, 255, 136, 0.1);
        transition: all 0.3s ease;
    }

    #hud::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: linear-gradient(45deg, #00ff88, transparent, #00ff88);
        z-index: -1;
        border-radius: 20px;
        animation: borderGlow 3s ease-in-out infinite;
    }

    @keyframes borderGlow {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.8; }
    }

    .hud-line {
        margin: 3px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .hud-line::after {
        content: '';
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        background: #00ff88;
        border-radius: 50%;
        animation: hudPulse 2s ease-in-out infinite;
    }

    @keyframes hudPulse {
        0%, 100% { opacity: 0.3; box-shadow: 0 0 5px #00ff88; }
        50% { opacity: 1; box-shadow: 0 0 15px #00ff88; }
    }

    .hud-value {
        color: #88ffaa;
        font-weight: 600;
        margin-left: 10px;
        text-shadow: 0 0 10px rgba(136, 255, 170, 0.5);
    }

    #status-indicator {
        width: 8px;
        height: 8px;
        background: #00ff88;
        border-radius: 50%;
        box-shadow: 0 0 10px #00ff88;
        animation: statusPulse 2s ease-in-out infinite;
    }

    @keyframes statusPulse {
        0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #00ff88; }
        50% { opacity: 0.5; transform: scale(1.3); box-shadow: 0 0 20px #00ff88; }
    }

    #data-stream {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        font-weight: 900;
        color: #00ff88;
        text-transform: uppercase;
        letter-spacing: 8px;
        opacity: 0 !important;
        transition: opacity 1s ease;
        z-index: 100;
        pointer-events: none;
        text-shadow: 
            0 0 20px #00ff88,
            0 0 40px #00ff88,
            0 0 60px #00ff88;
    }

    #control-panel {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        z-index: 100;
        width: 100%;
        padding: 0 20px;
    }

    .control-section {
        display: flex;
        align-items: center;
        gap: 20px;
        background: rgba(0, 0, 0, 0.7);
        padding: 15px 25px;
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 20px;
        backdrop-filter: blur(30px);
        position: relative;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        overflow: hidden;
        box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.1);
    }

    .control-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #00ff88, transparent);
        animation: controlSweep 4s linear infinite;
    }

    .control-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #00ff88, transparent);
        animation: controlSweep 4s linear infinite reverse;
    }

    @keyframes controlSweep {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    .cyber-switch {
        position: relative;
        width: 60px;
        height: 30px;
        background: #001122;
        border: 1px solid #00ff88;
        cursor: pointer;
        transition: all 0.3s ease;
   .........完整代码请登录后点击上方下载按钮下载查看