分享图
动画工坊
引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能止流箱 - 模块化平台 IFR 动画</title>
    <style>
        :root {
            --bg-color: #07090f;
            --grid-color: rgba(30, 41, 59, 0.6);
            --core-color: #1e293b;
            --accent-cyan: #00f0ff;
            --accent-green: #39ff14;
            --accent-orange: #ffaa00;
            --accent-pink: #ff0055;
            --text-main: #e2e8f0;
            --text-dim: #94a3b8;
            --font-mono: "Menlo", "Monaco", "Courier New", monospace;
            --font-sans: system-ui, -apple-system, sans-serif;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--bg-color);
            background-image: 
                linear-gradient(var(--grid-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
            background-size: 40px 40px;
            color: var(--text-main);
            font-family: var(--font-sans);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 边缘悬浮信息面板 - 严格控制字号和位置，绝不遮挡中央 */
        .hud-panel {
            position: absolute;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(0, 240, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 12px 16px;
            border-radius: 4px;
            pointer-events: none;
            z-index: 10;
        }

        .hud-top-left { top: 20px; left: 20px; border-left: 3px solid var(--accent-cyan); }
        .hud-top-right { top: 20px; right: 20px; border-right: 3px solid var(--accent-orange); text-align: right;}
        .hud-bottom-left { bottom: 20px; left: 20px; border-left: 3px solid var(--accent-green); }
        .hud-bottom-right { bottom: 20px; right: 20px; border-right: 3px solid var(--accent-pink); text-align: right;}

        .hud-title {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--accent-cyan);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .hud-data {
            font-size: 11px;
            color: var(--text-dim);
            line-height: 1.6;
        }
        
        .hud-highlight { color: #fff; font-weight: bold; }

        /* 中央 SVG 容器 */
        .svg-container {
            width: 100%;
            height: 100%;
            max-width: 1200px;
            max-height: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* --- 动画类 --- */
        
        /* 1. 核心闪烁初始化 */
        .core-pulse {
            animation: coreGlow 4s ease-in-out infinite alternate;
        }
        
        @keyframes coreGlow {
            0% { filter: drop-shadow(0 0 5px rgba(0,240,255,0.2)); }
            100% { filter: drop-shadow(0 0 20px rgba(0,240,255,0.6)); }
        }

        /* 2. 模块插拔动画 (IFR核心：快速对接) */
        .module-dock-top { opacity: 0; animation: dockTop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards; }
        .module-dock-right { opacity: 0; animation: dockRight 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s forwards; }
        .module-dock-bottom { opacity: 0; animation: dockBottom 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s forwards; }
        .module-dock-left { opacity: 0; animation: dockLeft 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.0s forwards; }

        @keyframes dockTop { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
        @keyframes dockRight { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
        @keyframes dockBottom { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
        @keyframes dockLeft { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

        /* 3. 数据流线 (总线通讯互联) */
        .data-flow-line {
            stroke-dasharray: 10 10;
            stroke-dashoffset: 200;
            opacity: 0;
            animation: dataFlowAnim 2s linear infinite, fadeIn 0.5s ease-out 3s forwards;
        }

        @keyframes dataFlowAnim {
            to { stroke-dashoffset: 0; }
        }
        
        @keyframes fadeIn { to { opacity: 1; } }

        /* 4. 局部细节循环动画 */
        .radar-wave {
            opacity: 0;
            animation: radarPulse 2s ease-out infinite;
            animation-delay: 3s; /* 等待对接完成 */
        }
        .radar-wave:nth-child(2) { animation-delay: 3.5s; }
        .radar-wave:nth-child(3) { animation-delay: 4.0s; }
        
        @keyframes radarPulse {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        .valve-spin {
            transform-origin: center;
            animation: valveRotate 4s ease-in-out infinite alternate;
            animation-delay: 3.5s;
        }
        @keyframes valveRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(90deg); }
        }

        .hydraulic-move {
            animation: pistonPump 3s ease-in-out infinite alternate;
            animation-delay: 4s;
        }
        @keyframes pistonPump {
            0% { transform: translateY(0); }
            100% { transform: translateY(-15px); }
        }

        .signal-dot {
            animation: blinkFast 0.5s infinite alternate;
            animation-delay: 3s;
        }
        @keyframes blinkFast { from { opacity: 0.2; } to { opacity: 1; filter: drop-shadow(0 0 5px var(--accent-orange)); } }

    </style>
</head>
<body>

    <!-- UI 层：极简工程数据角标 -->
    <div class="hud-panel hud-top-left">
        <div class="hud-title">SYSTEM.IFR // 模块化架构</div>
        <div class="hud-data">
            架构模式: <span class="hud-highlight">标准接口箱 + 自由组合</span><br>
            解决矛盾: 复杂定制需求 vs 生产标准化
        </div>
    </div>

    <div class="hud-panel hud-top-right">
        <div class="hud-title">PERFORMANCE // 核心参数</div>
        <div class="hud-data">
            模块连接: <span class="hud-highlight" style="color: var(--accent-green)">≤ 30 min (即插即用)</span><br>
            扩展槽位: <span class="hud-highlight">≥ 4 组 / 散热 50W</span>
        </div>
    </div>

    <div class="hud-panel hud-bottom-left">
        <div class="hud-title">PROTOCOL // 通讯矩阵</div>
        <div class="hud-data">
            边缘侧: <span class="hud-highlight">Modbus RTU / TCP</span><br>
            云端层: <span class="hud-highlight">OPC UA / 5G 工业以太网</span>
        </div>
    </div>

    <div class="hud-panel hud-bottom-right">
        <div class="hud-title">STATUS // 在线监控</div>
        <div class="hud-data">
            OEM产品化: <span class="hud-highlight" style="color: var(--accent-cyan)">ACTIVE</span><br>
            统一法兰协议: <span class="hud-highlight" style="color: var(--accent-cyan)">LOCKED & SYNCED</span>
        </div>
    </div>

    <!-- 核心 SVG 动画区 -->
    <div class="svg-container">
        <svg viewBox="0 0 1000 700">
            <defs>
                <!-- 发光滤镜 -->
                <filter id="glow-cyan" x="-20%" y="-20%" width="140%" height="140%">
                    <feGaussianBlur stdDeviation="6" result="blur" />
                    <feMerge>
                        <feMergeNode in="blur" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>
                <filter id="glow-orange" x="-20%" y="-20%" width="140%" height="140%">
                    <feGaussianBlur stdDeviation="6" result="blur" />
                    <feMerge>
                        <feMergeNode in="blur" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>
                
                <!-- 渐变定义 -->
                <linearGradient id="core-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#1e293b" />
                    <stop offset="100%" stop-color="#0f172a" />
                </linearGradient>
                <linearGradient id="slot-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="rgba(0, 240, 255, 0.1)" />
                    <stop offset="100%" stop-color="rgba(0, 240, 255, 0.0)" />
                </linearGradient>
            </defs>

            <!-- 中心组：智能止流稳流一体化核心底板 -->
            <g transform="translate(500, 350)" class="core-pulse">
                <!-- 中心机箱外壳 -->
                <rect x="-120" y="-120" width="240" height="240" rx="20" fill="url(#core-grad)" stroke="#334155" stroke-width="2" />
                <rect x="-105" y="-105" width="210" height="210" rx="15" fill="none" stroke="rgba(0,240,255,0.2)" stroke-width="1" stroke-dasharray="4 4" />
                
                <!-- 核心芯片 / PLC 枢纽 -->
                <rect x="-40" y="-40" width="80" height="80" rx="8" fill="#0f172a" stroke="var(--accent-cyan)" stroke-width="2" filter="url(#glow-cyan)" />
                <circle cx="0" cy="0" r="15" fill="none" stroke="var(--accent-cyan)" stroke-width="2" />
                <circle cx="0" cy="0" r="5" fill="var(--accent-cyan)" />
                <text x="0" y="5" font-family="var(--font-mono)" font-size="10" fill="var(--accent-cyan)" text-anchor="middle" dominant-baseline="middle" transform="translate(0, 25)">PLC / AI Hub</text>
                
                <!-- 内部总线电路纹理 (四向放射) -->
                <path d="M-40 0 L-105 0 M40 0 L105 0 M0 -40 L0 -105 M0 40 L0 105" stroke="#334155" stroke-width="2" />
                <path d="M-30 -30 L-70 -70 M30 -30 L70 -70 M-30 30 L-70 70 M30 30 L70 70" stroke="#334155" stroke-width="1" />
                
                <!-- 统一接口槽位 (Slots) -->
                <!-- Top Slot -->
                <path d="M-50 -120 L50 -120 L40 -90 L-40 -90 Z" fill="url(#slot-grad)" stroke="var(--accent-cyan)" stroke-width="1.5" stroke-dasharray="2 2" />
                <text x="0" y="-100" font-family="var(--font-mono)" font-size="8" fill="var(--text-dim)" text-anchor="middle">SLOT 01 / DATA</text>
                
                <!-- Right Slot -->
                <path d="M120 -50 L120 50 L90 40 L90 -40 Z" fill="url(#slot-grad)" stroke="var(--accent-cyan)" stroke-width="1.5" stroke-dasharray="2 2" />
                <text x="105" y="0" font-family="var(--font-mono)" font-size="8" fill="var(--text-dim)" text-anchor="middle" transform="rotate(90, 105, 0)">SLOT 02 / COMMS</text>
                
                <!-- Bottom Slot -->
                <path d="M-50 120 L50 120 L40 90 L-40 90 Z" fill="url(#slot-grad)" stroke="var(--accent-cyan)" stroke-width="1.5" stroke-dasharray="2 2" />
                <text x="0" y="105" font-family="var(--font-mono)" font-size="8" fill="var(--text-dim)" text-anchor="middle">SLOT 03 / MECH</text>
                
                <!-- Left Slot -->
                <path d="M-120 -50 L-120 50 L-90 40 L-90 -40 Z" fill="url(#slot-grad)" stroke="var(--accent-cyan)" stroke-width="1.5" stroke-dasharray="2 2" />
                <text x="-105" y="0" font-family="var(--font-mono)" font-size="8" fill="var(--text-dim)" text-anchor="middle" transform="rotate(-90, -105, 0)">SLOT 04 / FLUID</text>
            </g>

            <!-- 动态数据流 (对接后显示) -->
            <g transform="translate(500, 350)">
                <line x1="0" y1="-200" x2="0" y2="-40" stroke="var(--accent-cyan)" stroke-width="3" class="data-flow-line" />
                <line x1="200" y1="0" x2="40" y2="0" stroke="var(--accent-orange)" stroke-width="3" class="data-flow-line" />
                <line x1="0" y1="200" x2="0" y2="40" stroke="var(--accent-green)" stroke-width="3" class="data-flow-line" />
                <line x1="-200" y1="0" x2="-40" y2="0" stroke="var(--accent-pink)" stroke-width="3" class="data-flow-line" />
            </g>

            <!-- 模块 1：检测模块 (Top) - 传感器阵列 -->
            <g transform="translate(500, 150)" class="module-dock-top">
                <rect x="-60" y="-40" width="120" height="40" rx="5" fill="#1e293b" stroke="var(--accent-cyan)" stroke-width="2" filter="url(#glow-cyan)"/>
                <rect x="-20" y="-60" width="40" height="20" rx="3" fill="#334155" />
                <path d="M-10 -60 L0 -80 L10 -60" fill="none" stroke="var(--text-dim)" stroke-width="2" />
                <!-- 雷达波动画 -->
                <circle cx="0" cy="-80" r="10" fill="none" stroke="var(--accent-cyan)" stroke-width="2" class="radar-wave" transform-origin="0 -80"/>
                <circle cx="0" cy="-80" r="20" fill="none" stroke="var(--accent-cyan)" stroke-width="1.5" class="radar-wave" transform-origin="0 -80"/>
                <circle cx="0" cy="-80" r="30" fill="none" stroke="var(--accent-cyan)" stroke-width="1" class="radar-wave" transform-origin="0 -80"/>
                
                <!-- 统一法兰接口底座 -->
                <rect x="-40" y="0" width="80" height="15" fill="#0f172a" stroke="var(--accent-cyan)" stroke-width="2" />
                <text x="0" y="-15" font-family="var(--font-sans)" font-size="12" fill="#fff" text-anchor="middle" font-weight="bold">检测模块 (多传感器)</text>
            </g>

            <!-- 模块 2：通讯模块 (Right) - 网关/5G -->
            <g transform="translate(700, 350)" class="module-dock-right">
                <rect x="0" y="-60" width="80" height="120" rx="5" fill="#1e293b" stroke="var(--accent-orange)" stroke-width="2" filter="url(#glow-orange)"/>
                <!-- 统一法兰接口底座 -->
                <rect x="-15" y="-40" width="15" height="80" fill="#0f172a" stroke="var(--accent-orange)" stroke-width="2" />
                <!-- 5G天线 -->
                <line x1="80" y1="-40" x2="110" y2="-60" stroke="var(--accent-orange)" stroke-width="3" stroke-linecap="round"/>
                <line x1="80" y1="-20" x2="120" y2="-20" stroke="var(--accent-orange)" stroke-width="3" stroke-linecap="round"/>
                <!-- 闪烁信号灯 -->
                <circle cx="20" cy="-40" r="3" fill="var(--accent-orange)" class="signal-dot"/>
                <circle cx="40" cy="-40" r="3" fill="var(--accent-orange)" class="signal-dot" style="animation-delay: 3.2s"/>
                <circle cx="60" cy="-40" r="3" fill="var(--accent-orange)" class="signal-dot" style="animation-delay: 3.4s"/>
                <text x="40" y="20" font-family="var(--font-sans)" font-size="12" fill="#fff" text-anchor="middle" font-weight="bold" transform="rotate(90, 40, 20)">通讯模块 (5G/网关)</text>
            </g>

            <!-- 模块 3：筛面姿态模块 (Bottom) - 四角升降/液压 -->
            <g transform="translate(500, 550)" class="module-dock-bottom">
                <rect x="-70" y="0" width="140" height="50" rx="5" fill="#1e293b" stroke="var(--accent-green)" stroke-width="2" />
                <!-- 统一法兰接口底座 -->
                <rect x="-40" y="-15" width="80" height="15" fill="#0f172a" stroke="var(--accent-green)" stroke-width="2" />
                <!-- 液压伸缩杆 (双侧) -->
                <g class="hydraulic-move">
                    <rect x="-50" y="50" width="16" height="40" fill="#475569" rx="2" />
                    <rect x="34" y="50" width="16" height="40" fill="#475569" rx="2" />
                </g>
                <rect x="-55" y="30" width="26" height="30" fill="#334155" />
                <rect x="29" y="30" width="26" height="30" fill="#334155" />
                
                <text x="0" y="25" font-family="var(--font-sans)" font-size="12" fill="#fff" text-anchor="middle" font-weight="bold">姿态模块 (升降执行)</text>
            </g>

            <!-- 模块 4：进料控制模块 (Left) - 阀门组 -->
            <g transform="translate(300, 350)" class="module-dock-left">
                <rect x="-100" y="-50" width="100" height="100" rx="5" fill="#1e293b" stroke="var(--accent-pink)" stroke-width="2" />
                <!-- 统一法兰接口底座 -->
                <rect x="0" y="-40" width="15" height="80" fill="#0f172a" stroke="var(--accent-pink)" stroke-width="2" />
                
                <!-- 管道与蝶阀 -->
                <path d="M-120 -20 L-80 -20 L-80 20 L-120 20 Z" fill="#334155" />
                <circle cx="-50" cy="0" r="30" fill="none" stroke="#475569" stroke-width="4" />
                <!-- 旋转的阀门叶片 -->
                <g transform="translate(-50, 0)">
                    <line x1="-25" y1="0" x2="25" y2="0" stroke="var(--accent-pink)" stroke-width="4" class="valve-spin" />
                </g>

                <text x="-50" y="-60" font-family="var(--font-sans)" font-size="12" fill="#fff" text-anchor="middle" font-weight="bold">进料模块 (智能阀门)</text>
            </g>
            
            <!-- 指引线与功能高亮标签 (强调理想解) -->
            <g opacity="0" style="animation: fadeIn 1s ease-out 4.5s forwards;">
                <!-- 左上角指向插拔接口 -->
                <path d="M420 270 L380 230 L250 230" fill="none" stroke="var(--text-dim)" stroke-width="1" />
                <circle cx="420" cy="270" r="3" fill="var(--accent-cyan)" />
                <text x="250" y="220" font-family="var(--font-mono)" font-size="10" fill="var(--accent-cyan)" text-anchor="start">统一法兰/接插接口 (消除组装矛盾)</text>
                
                <!-- 右下角指向数据核心 -->
                <path d="M540 390 L600 450 L750 450" fill="none" stroke="var(--text-dim)" stroke-width="1" />
                <circle cx="540" cy="390" r="3" fill="var(--accent-orange)" />
                <text x="750" y="440" font-family="var(--font-mono)" font-size="10" fill="var(--accent-orange)" text-anchor="end">即插即联: 物理对接即完成数据打通</text>
            </g>

        </svg>
    </div>

</body>
</html>
积分规则：每轮对话扣10分