分享图
动画工坊
引擎就绪
<!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: #060b13;
        --grid-color: rgba(0, 162, 255, 0.08);
        --slate-base: #1c283d;
        --slate-edge: #3a5682;
        --cushion-base: #111a28;
        --cushion-border: #00f3ff;
        --cloth-color: #00ff66;
        --magnet-color: #ffaa00;
        --laser-color: #ff0055;
        --text-primary: #8ab4f8;
        --text-secondary: #5e7a9e;
        --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        color: var(--text-primary);
        font-family: system-ui, -apple-system, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        overflow: hidden;
    }

    .animation-container {
        position: relative;
        width: 100vw;
        height: 100vh;
        max-width: 1200px;
        max-height: 800px;
        background: 
            linear-gradient(var(--grid-color) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
        background-size: 40px 40px;
        box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(0, 243, 255, 0.1);
    }

    /* Info Overlay - Small, Unobtrusive, Edge Aligned */
    .info-panel {
        position: absolute;
        pointer-events: none;
        z-index: 10;
    }
    .info-top-left { top: 20px; left: 24px; }
    .info-bottom-right { bottom: 20px; right: 24px; text-align: right; }
    .info-top-right { top: 20px; right: 24px; text-align: right; }
    
    h1 {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: var(--cushion-border);
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    
    .desc {
        font-size: 12px;
        color: var(--text-secondary);
        max-width: 300px;
        line-height: 1.6;
        margin: 0;
    }

    .tag {
        display: inline-block;
        font-size: 10px;
        font-family: var(--font-mono);
        padding: 2px 6px;
        background: rgba(0, 243, 255, 0.1);
        border: 1px solid rgba(0, 243, 255, 0.3);
        border-radius: 4px;
        margin-top: 6px;
        color: var(--cushion-border);
    }

    .triz-highlight {
        color: var(--magnet-color);
        font-weight: 600;
    }

    /* SVG Animation Styles */
    svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Keyframes */
    /* 1. Pneumatic Lift & Drop (0-30%) */
    @keyframes cushion-lift {
        0%, 5% { transform: translateY(0); }
        10%, 20% { transform: translateY(-45px); }
        25%, 100% { transform: translateY(0); }
    }

    /* 2. Cloth Tensioning (10-25%) */
    @keyframes cloth-insert {
        0%, 12% { opacity: 0; transform: translate(-30px, -20px); }
        17%, 100% { opacity: 1; transform: translate(0, 0); }
    }

    /* 3. Cover Open/Close (35-90%) */
    @keyframes cover-rotate {
        0%, 30% { transform: rotate(0deg); }
        35%, 85% { transform: rotate(85deg); }
        90%, 100% { transform: rotate(0deg); }
    }

    /* 4. Magnetic Sync Movement (40-85%) */
    @keyframes magnetic-move {
        0%, 40% { transform: translateX(0); }
        55%, 65% { transform: translateX(450px); }
        80%, 100% { transform: translateX(0); }
    }

    /* 5. Magnetic Force Visuals */
    @keyframes magnetic-waves {
        0%, 35% { opacity: 0; stroke-dashoffset: 20; }
        40%, 80% { opacity: 1; stroke-dashoffset: 0; }
        85%, 100% { opacity: 0; stroke-dashoffset: -20; }
    }

    @keyframes pulse-glow {
        0%, 100% { filter: drop-shadow(0 0 5px var(--magnet-color)); }
        50% { filter: drop-shadow(0 0 15px var(--magnet-color)); }
    }

    @keyframes text-fade {
        0%, 5% { opacity: 0; }
        10%, 25% { opacity: 1; }
        30%, 100% { opacity: 0; }
    }
    
    @keyframes text-fade-2 {
        0%, 40% { opacity: 0; }
        45%, 80% { opacity: 1; }
        85%, 100% { opacity: 0; }
    }

    /* Apply Animations */
    .anim-cushion { animation: cushion-lift 14s infinite cubic-bezier(0.4, 0, 0.2, 1); }
    .anim-cloth { animation: cloth-insert 14s infinite cubic-bezier(0.4, 0, 0.2, 1); }
    .anim-cover { 
        transform-origin: 340px 340px; 
        animation: cover-rotate 14s infinite cubic-bezier(0.4, 0, 0.2, 1); 
    }
    .anim-magnet { animation: magnetic-move 14s infinite cubic-bezier(0.4, 0, 0.2, 1); }
    .anim-force { animation: magnetic-waves 14s infinite linear; }
    
    .anim-text-1 { animation: text-fade 14s infinite ease-in-out; }
    .anim-text-2 { animation: text-fade-2 14s infinite ease-in-out; }

    /* Interactive variables (simulated via keyframes for auto-play) */
    .glowing-magnet {
        animation: pulse-glow 2s infinite ease-in-out;
    }

</style>
</head>
<body>

<div class="animation-container">
    <!-- UI Overlays -->
    <div class="info-panel info-top-left">
        <h1>系统架构图 // 库边演进方案</h1>
        <p class="desc">采用气动垂升框架与底层磁耦合驱动架构。<br>消除了传统下翻结构的额外空间占用。</p>
        <div class="tag">STATE: AUTOMATIC LOOP</div>
    </div>
    
    <div class="info-panel info-top-right">
        <p class="desc"><span class="triz-highlight">IFR (最终理想解) 映射</span><br>
        资源复用: 利用青石板作为天然导轨隔离层<br>
        自给自足: 库边重力转化为台尼恒定张紧力
        </p>
    </div>

    <div class="info-panel info-bottom-right">
        <p class="desc font-mono" style="font-family: var(--font-mono); color: var(--cushion-border);">
            SYS.LOAD // 100%<br>
            MAG.FORCE // >250N<br>
            SLATE.THICKNESS // ≤40mm
        </p>
    </div>

    <!-- Main SVG Animation -->
    <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
        <defs>
            <!-- Gradients & Filters -->
            <linearGradient id="metal-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#2a3b5c" />
                <stop offset="100%" stop-color="#141d2e" />
            </linearGradient>
            <linearGradient id="cylinder-grad" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#557" />
                <stop offset="50%" stop-color="#ccd" />
                <stop offset="100%" stop-color="#335" />
            </linearGradient>
            <linearGradient id="magnet-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#ffd500" />
                <stop offset="100%" stop-color="#ff7700" />
            </linearGradient>
            
            <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="4" result="blur" />
                <feMerge>
                    <feMergeNode in="blur" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
            
            <filter id="magnet-glow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="8" result="blur" />
                <feComponentTransfer in="blur" result="glow">
                    <feFuncA type="linear" slope="1.5"/>
                </feComponentTransfer>
                <feMerge>
                    <feMergeNode in="glow" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>

            <!-- Textures -->
            <pattern id="hash" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                <line x1="0" y1="0" x2="0" y2="8" stroke="#ffffff" stroke-width="1" stroke-opacity="0.05" />
            </pattern>
        </defs>

        <!-- STATIC INFRASTRUCTURE -->
        <g id="table-base">
            <!-- Main Slate (青石板) -->
            <!-- Thickness represents max 40mm limitation -->
            <path d="M 350 400 L 1000 400 L 1000 440 L 370 440 L 370 425 L 355 415 L 350 415 Z" fill="url(#metal-grad)" stroke="var(--slate-edge)" stroke-width="2" />
            <rect x="350" y="400" width="650" height="40" fill="url(#hash)" pointer-events="none" />
            
            <!-- V-Groove Highlight -->
            <path d="M 350 415 L 355 415 L 370 425 L 370 440" fill="none" stroke="var(--cushion-border)" stroke-width="1.5" stroke-dasharray="4 2" opacity="0.6"/>

            <!-- Support Structure -->
            <rect x="200" y="440" width="150" height="200" fill="#0d1421" stroke="#233554" stroke-width="2" />
            <!-- Cylinder Base -->
            <path d="M 240 500 L 310 500 L 310 540 L 240 540 Z" fill="#1e2d45" stroke="#3a5682" stroke-width="2" />
            <circle cx="275" cy="520" r="10" fill="#0a0f13" />
            
            <!-- Labels -->
            <text x="700" y="425" fill="var(--text-secondary)" font-family="var(--font-mono)" font-size="12" text-anchor="middle" letter-spacing="2">青石板 (SLATE MAX: 40MM)</text>
            <line x1="380" y1="420" x2="450" y2="420" stroke="var(--text-secondary)" stroke-width="1" stroke-dasharray="2 2" />
        </g>

        <!-- DYNAMIC PNEUMATIC CUSHION GROUP -->
        <g class="anim-cushion">
            <!-- Cylinder Piston -->
            <rect x="265" y="400" width="20" height="100" fill="url(#cylinder-grad)" />
            
            <!-- Cushion Main Body (刚性框架) -->
            <!-- Houses the hidden compartment -->
            <path d="M 200 380 L 340 380 L 340 340 L 320 280 L 200 280 Z" fill="var(--cushion-base)" stroke="var(--cushion-border)" stroke-width="2" filter="url(#neon-glow)" />
            <path d="M 210 290 L 310 290 L 325 335 L 325 370 L 210 370 Z" fill="#0a0f13" stroke="#233554" stroke-width="1" />
            
            <!-- Mechanical Lock Indicator (机械自锁) -->
            <circle cx="340" cy="380" r="4" fill="var(--laser-color)" />
            
            <!-- Cloth Edge (柔性钢丝绳台尼) -->
            <g class="anim-cloth">
                <path d="M 330 380 L 345 380 L 360 395 L 360 410" fill="none" stroke="var(--cloth-color)" stroke-width="3" filter="url(#neon-glow)" />
                <circle cx="360" cy="410" r="3" fill="#fff" /> <!-- Steel wire bead -->
                <path d="M 360 395 L 800 395" fill="none" stroke="var(--cloth-color)" stroke-width="3" opacity="0.8" />
            </g>

            <!-- Flap Cover (开球库边盖板) -->
            <path class="anim-cover" d="M 340 340 L 340 380 L 350 380 L 350 340 Z" fill="var(--cushion-base)" stroke="var(--cushion-border)" stroke-width="1.5" />
            <circle cx="340" cy="340" r="3" fill="var(--cushion-border)" /> <!-- Pivot -->

            <!-- Data Tooltips attached to cushion -->
            <g class="anim-text-1">
                <line x1="200" y1="330" x2="150" y2="330" stroke="var(--cloth-color)" stroke-width="1" />
                <text x="140" y="325" fill="var(--cloth-color)" font-family="var(--font-mono)" font-size="12" text-anchor="end">SYS.ACTION: LIFT</text>
                <text x="140" y="340" fill="var(--text-secondary)" font-size="11" text-anchor="end">垂直顶升 45mm</text>
                <text x="140" y="355" fill="var(--text-secondary)" font-size="11" text-anchor="end">重力+机械自锁张紧台尼</text>
            </g>
        </g>

        <!-- DYNAMIC MAGNETIC CLEANING SYSTEM -->
        <g class="anim-magnet">
            <!-- Magnetic Carriage (Under Slate) -->
            <g transform="translate(260, 445)">
                <rect x="0" y="0" width="80" height="35" rx="4" fill="#222" stroke="var(--magnet-color)" stroke-width="2" />
                <rect x="10" y="5" width="60" height="15" fill="url(#magnet-grad)" class="glowing-magnet" filter="url(#magnet-glow)"/>
                <!-- Wheels -->
                <circle cx="15" cy="40" r="8" fill="#555" stroke="#222" stroke-width="2" />
                <circle cx="65" cy="40" r="8" fill="#555" stroke="#222" stroke-width="2" />
                <text x="40" y="28" fill="#000" font-family="var(--font-mono)" font-size="10" font-weight="bold" text-anchor="middle">MAG-DRV</text>
            </g>

            <!-- Cleaning Bar (Above Slate, Hidden in Cushion initially) -->
            <g transform="translate(260, 360)">
                <rect x="0" y="0" width="80" height="30" rx="4" fill="#333" stroke="var(--magnet-color)" stroke-width="1.5" />
                <rect x="10" y="10" width="60" height="15" fill="url(#magnet-grad)" class="glowing-magnet" />
                <!-- Brush bristles -->
                <path d="M 5 30 L 5 40 M 15 30 L 15 40 M 25 30 L 25 40 M 35 30 L 35 40 M 45 30 L 45 40 M 55 30 L 55 40 M 65 30 L 65 40 M 75 30 L 75 40" stroke="#00f3ff" stroke-width="2" opacity="0.7" />
                
                <!-- Moving Laser Line for cleaning effect -->
                <line x1="85" y1="-10" x2="85" y2="40" stroke="var(--laser-color)" stroke-width="2" filter="url(#neon-glow)" opacity="0.8" />
            </g>

            <!-- Invisible Magnetic Force Lines -->
            <g stroke="var(--magnet-color)" stroke-width="2" stroke-dasharray="6 4" class="anim-force" filter="url(#magnet-glow)">
                <line x1="280" y1="390" x2="280" y2="445" />
                <line x1="300" y1="390" x2="300" y2="445" />
                <line x1="320" y1="390" x2="320" y2="445" />
            </g>
            
            <!-- Data Tooltips attached to magnet -->
            <g class="anim-text-2">
                <line x1="300" y1="350" x2="300" y2="280" stroke="var(--magnet-color)" stroke-width="1" />
                <line x1="300" y1="280" x2="330" y2="280" stroke="var(--magnet-color)" stroke-width="1" />
                <text x="340" y="275" fill="var(--magnet-color)" font-family="var(--font-mono)" font-size="12" font-weight="bold">IFR ACTION: ACTIVE</text>
                <text x="340" y="295" fill="var(--text-primary)" font-size="11">磁耦合力 > 250N</text>
                <text x="340" y="310" fill="var(--text-secondary)" font-size="11">隔石板隐形牵引，无需导轨</text>
            </g>
        </g>
    </svg>
</div>

</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分