独立渲染引擎就绪引擎就绪
<!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: #0b1120;
--grid-color: rgba(56, 189, 248, 0.08);
--text-main: #94a3b8;
--text-glow: #e2e8f0;
--accent-auto: #0ea5e9;
--accent-fail: #ef4444;
--accent-manual: #f59e0b;
--metal-light: #64748b;
--metal-dark: #334155;
--anim-duration: 12s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'SF Pro Display', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* 核心动画容器 */
#animation-container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 背景网格 */
.grid-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 40px 40px;
z-index: 0;
}
/* 噪点纹理，增加机械真实感 */
.noise-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
z-index: 1;
}
/* SVG 核心图形区 */
svg {
width: 90vw;
height: 90vh;
max-width: 1400px;
max-height: 900px;
z-index: 10;
filter: drop-shadow(0 0 30px rgba(0,0,0,0.5));
}
/* ======= 文本覆盖层 ======= */
/* 绝对遵循：小字号、边缘定位、绝不遮挡核心 */
.info-panel {
position: absolute;
z-index: 20;
padding: 1.5rem;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
pointer-events: none;
}
.top-left { top: 2rem; left: 2rem; }
.top-right { top: 2rem; right: 2rem; width: 280px; }
.bottom-left { bottom: 2rem; left: 2rem; }
h1 {
font-size: 14px;
font-weight: 600;
color: var(--text-glow);
letter-spacing: 1px;
margin-bottom: 4px;
text-transform: uppercase;
}
p {
font-size: 12px;
line-height: 1.6;
color: var(--text-main);
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 13px;
font-family: monospace;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
/* ======= CSS 动画定义 ======= */
/* 状态指示器文字切换 */
.text-auto { animation: fadeAuto var(--anim-duration) infinite; }
.text-fail { animation: fadeFail var(--anim-duration) infinite; }
.text-manual { animation: fadeManual var(--anim-duration) infinite; }
@keyframes fadeAuto { 0%, 30% { opacity: 1; color: var(--accent-auto); } 31%, 100% { opacity: 0.3; color: var(--text-main); } }
@keyframes fadeFail { 0%, 30% { opacity: 0.3; color: var(--text-main); } 31%, 40% { opacity: 1; color: var(--accent-fail); box-shadow: 0 0 10px var(--accent-fail); } 41%, 100% { opacity: 0.3; color: var(--text-main); } }
@keyframes fadeManual { 0%, 40% { opacity: 0.3; color: var(--text-main); } 41%, 90% { opacity: 1; color: var(--accent-manual); } 91%, 100% { opacity: 0.3; color: var(--text-main); } }
/* 电流流动 */
.power-line {
stroke-dasharray: 10 5;
animation: flow 1s linear infinite, powerState var(--anim-duration) infinite;
}
@keyframes flow { to { stroke-dashoffset: -15; } }
@keyframes powerState { 0%, 30% { opacity: 1; stroke: var(--accent-auto); } 31%, 100% { opacity: 0; } }
/* 磁力吸合线 */
.magnetic-field {
animation: magPulse 2s ease-in-out infinite, powerState var(--anim-duration) infinite;
}
@keyframes magPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; stroke-width: 3; } }
/* 离合器分离动作 (<0.2s 视觉体现) */
.clutch-slide {
animation: clutchMove var(--anim-duration) infinite;
}
@keyframes clutchMove {
0%, 30% { transform: translateX(0); }
31%, 90% { transform: translateX(45px); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* 瞬间弹开 */
95%, 100% { transform: translateX(0); animation-timing-function: ease-in; }
}
/* 弹簧伸展 */
.spring-scale {
transform-origin: left center;
animation: springStretch var(--anim-duration) infinite;
}
@keyframes springStretch {
0%, 30% { transform: scaleX(1); }
31%, 90% { transform: scaleX(2.5); }
95%, 100% { transform: scaleX(1); }
}
/* 电机旋转 */
.motor-spin {
transform-origin: 300px 400px;
animation: motorRotate var(--anim-duration) infinite linear;
}
@keyframes motorRotate {
0% { transform: rotate(0deg); }
30% { transform: rotate(360deg); }
31%, 100% { transform: rotate(360deg); } /* 断电停止 */
}
/* 手摇柄旋转 (1:60 比例示意，快速转动) */
.crank-spin {
transform-origin: 850px 580px;
animation: crankRotate var(--anim-duration) infinite linear;
}
@keyframes crankRotate {
0%, 40% { transform: rotate(0deg); opacity: 0.2; }
41% { opacity: 1; }
41%, 90% { transform: rotate(1440deg); opacity: 1; } /* 手摇介入 */
91%, 100% { transform: rotate(1440deg); opacity: 0.2; }
}
/* 天地锁杆位移 */
.lock-rod-top {
animation: rodTopMove var(--anim-duration) infinite;
}
.lock-rod-bottom {
animation: rodBottomMove var(--anim-duration) infinite;
}
@keyframes rodTopMove {
0%, 5% { transform: translateY(0); }
15%, 30% { transform: translateY(-80px); } /* 自动打栓 */
31%, 40% { transform: translateY(-80px); } /* 保持 */
50%, 90% { transform: translateY(0); } /* 手动抽回 */
100% { transform: translateY(0); }
}
@keyframes rodBottomMove {
0%, 5% { transform: translateY(0); }
15%, 30% { transform: translateY(80px); }
31%, 40% { transform: translateY(80px); }
50%, 90% { transform: translateY(0); }
100% { transform: translateY(0); }
}
/* 锁止齿轮传动轴旋转 */
.drive-shaft-spin {
transform-origin: 650px 400px;
animation: shaftRotate var(--anim-duration) infinite linear;
}
@keyframes shaftRotate {
0% { transform: rotate(0deg); }
15% { transform: rotate(90deg); }
15%, 30% { transform: rotate(90deg); }
30%, 40% { transform: rotate(90deg); }
50%, 90% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
/* 全局警告闪烁 */
.alert-flash {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(239, 68, 68, 0.1);
pointer-events: none;
z-index: 5;
opacity: 0;
animation: flash var(--anim-duration) infinite;
}
@keyframes flash {
30% { opacity: 0; }
31%, 35% { opacity: 1; }
40%, 100% { opacity: 0; }
}
/* 连接件高亮指示 */
.highlight-manual {
animation: glowManual var(--anim-duration) infinite;
}
@keyframes glowManual {
0%, 40% { stroke: var(--metal-light); fill: var(--metal-dark); }
41%, 90% { stroke: var(--accent-manual); fill: rgba(245, 158, 11, 0.2); }
91%, 100% { stroke: var(--metal-light); fill: var(--metal-dark); }
}
</style>
</head>
<body>
<div class="grid-bg"></div>
<div class="noise-overlay"></div>
<div class="alert-flash"></div>
<div id="animation-container">
<!-- 绝对定位的小尺寸文本信息面板 -->
<div class="info-panel top-left">
<h1>常闭失电分离离合系统</h1>
<p style="color: rgba(255,255,255,0.4); font-size: 10px; margin-bottom: 8px;">IFR 原理最终理想解演示</p>
<p>1. 电机动力不直连，串联电磁离合器</p>
<p>2. 通电时吸合传导，断电时弹簧瞬间推离</p>
<p>3. 彻底释放物理阻力，接入 1:60 手摇盒</p>
</div>
<div class="info-panel top-right">
<h1>系统运作时序状态</h1>
<div style="margin-top: 12px;">
<div class="status-indicator text-auto">
<div class="status-dot" style="background: var(--accent-auto);"></div>
[0.0s - 3.6s] 正常通电：自动落锁
</div>
<div class="status-indicator text-fail">
<div class="status-dot" style="background: var(--accent-fail);"></div>
[3.6s - 4.8s] 突发断电：离合器弹开释放
</div>
<div class="status-indicator text-manual">
<div class="status-dot" style="background: var(--accent-manual);"></div>
[4.8s - 10.8s] 手动模式：转动摇把解锁
</div>
</div>
</div>
<div class="info-panel bottom-left">
<p style="color: var(--accent-auto);">■ 通电控制链路</p>
<p style="color: var(--accent-manual);">■ 手动机械链路</p>
<p style="color: #64748b; font-size: 10px; margin-top: 4px;">* 动画加载后自动循环播放</p>
</div>
<!-- 核心 SVG 动画区，通过 viewBox 控制比例并居中 -->
<svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 金属渐变 -->
<linearGradient id="metal-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#475569" />
<stop offset="50%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</linearGradient>
<linearGradient id="copper-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#b45309" />
<stop offset="50%" stop-color="#f59e0b" />
<stop offset="100%" stop-color="#78350f" />
</linearGradient>
<!-- 发光滤镜 -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- ================= 电机与电源部分 ================= -->
<g transform="translate(100, 320)">
<!-- 线路 -->
<path d="M 50 150 L 50 250 L 250 250" fill="none" stroke="#1e293b" stroke-width="4" />
<path d="M 50 150 L 50 250 L 250 250" fill="none" stroke-width="2" class="power-line" />
<!-- 电机外壳 -->
<rect x="100" y="20" width="160" height="120" rx="8" fill="url(#metal-grad)" stroke="#64748b" stroke-width="2" />
<text x="180" y="85" fill="#94a3b8" font-size="14" text-anchor="middle" font-family="monospace">减速电机</text>
<!-- 电机输出轴与内部齿轮示意 -->
<g class="motor-spin">
<circle cx="200" cy="80" r="30" fill="none" stroke="#38bdf8" stroke-width="1" stroke-dasharray="4 4" opacity="0.5" />
<path d="M 190 50 L 210 50 L 200 80 Z" fill="#38bdf8" opacity="0.3" />
</g>
<rect x="260" y="70" width="40" height="20" fill="#334155" />
</g>
<!-- ================= 电磁离合器核心 (IFR 焦点) ================= -->
<!-- 视觉引导：放在画面偏左居中，动作最剧烈处 -->
<g transform="translate(400, 370)">
<!-- 左半部 (连接电机) - 固定 -->
<g>
<rect x="0" y="0" width="60" height="60" rx="4" fill="url(#metal-grad)" stroke="#64748b" stroke-width="2" />
<!-- 电磁线圈示意 -->
<rect x="10" y="10" width="40" height="40" rx="2" fill="url(#copper-grad)" />
<!-- 吸合磁力线 -->
<path d="M 65 15 L 85 15 M 65 30 L 85 30 M 65 45 L 85 45" fill="none" stroke="#0ea5e9" stroke-width="2" class="magnetic-field" />
</g>
<!-- 弹簧机构 -->
<g transform="translate(60, 20)">
<path d="M 0 10 L 5 0 L 15 20 L 25 0 L 30 10" fill="none" stroke="#cbd5e1" stroke-width="3" stroke-linejoin="round" class="spring-scale" />
</g>
<!-- 右半部 (连接门轴/锁杆) - 会因为断电弹开 -->
<g class="clutch-slide" transform="translate(90, 0)">
<rect x="0" y="0" width="60" height="60" rx="4" fill="url(#metal-grad)" stroke="#64748b" stroke-width="2" />
<rect x="-10" y="10" width="10" height="40" fill="#475569" /> <!-- 摩擦片 -->
<!-- 传动轴接出门 -->
<rect x="60" y="20" width="120" height="20" fill="url(#metal-grad)" />
<text x="30" y="-10" fill="#e2e8f0" font-size="12" text-anchor="middle" font-family="monospace">防爆离合器</text>
</g>
</g>
<!-- ================= 中央驱动传动箱 ================= -->
<g transform="translate(670, 360)">
<rect x="0" y="0" width="80" height="80" rx="8" fill="#1e293b" stroke="#475569" stroke-width="2" />
<!-- 内部齿轮示意 -->
<circle cx="40" cy="40" r="25" fill="none" stroke="#64748b" stroke-width="4" stroke-dasharray="10 5" class="drive-shaft-spin" />
<circle cx="40" cy="40" r="10" fill="#475569" />
</g>
<!-- ================= 天地锁及门扇体 ================= -->
<g transform="translate(690, 100)">
<!-- 门体导轨/护板 -->
<rect x="-30" y="0" width="100" height="600" fill="none" stroke="#1e293b" stroke-width="2" stroke-dasharray="20 10" />
<!-- 上锁杆 (天锁) -->
<g class="lock-rod-top">
<rect x="10" y="40" width="20" height="220" fill="url(#metal-grad)" stroke="#94a3b8" stroke-width="1" />
<path d="M 5 40 L 35 40 L 20 20 Z" fill="#94a3b8" /> <!-- 锁舌头 -->
</g>
<!-- 下锁杆 (地锁) -->
<g class="lock-rod-bottom" transform="translate(0, 340)">
<rect x="10" y="0" width="20" height="220" fill="url(#metal-grad)" stroke="#94a3b8" stroke-width="1" />
<path d="M 5 220 L 35 220 L 20 240 Z" fill="#94a3b8" /> <!-- 锁舌头 -->
</g>
<!-- 上下锁孔示意 -->
<rect x="0" y="-20" width="40" height="40" fill="none" stroke="#ef4444" stroke-width="2" opacity="0.3" />
<rect x="0" y="580" width="40" height="40" fill="none" stroke="#ef4444" stroke-width="2" opacity="0.3" />
</g>
<!-- ================= 手摇驱动盒 (1:60 蜗轮蜗杆) ================= -->
<g transform="translate(800, 520)">
<!-- 机械连接线 -->
<path d="M -90 -120 L -90 60 L 0 60" fill="none" stroke-width="3" class="highlight-manual" />
<!-- 手摇盒体 -->
<rect x="0" y="20" width="100" height="80" rx="6" fill="#0f172a" stroke="#64748b" stroke-width="2" />
<text x="50" y="10" fill="#94a3b8" font-size="12" text-anchor="middle" font-family="monospace">1:60 手摇驱动盒</text>
<!-- 手摇轮盘 -->
<g transform="translate(50, 60)" class="crank-spin">
<circle cx="0" cy="0" r="30" fill="none" stroke="#f59e0b" stroke-width="4" filter="url(#glow)" />
<line x1="0" y1="-30" x2="0" y2="30" stroke="#f59e0b" stroke-width="4" />
<line x1="-30" y1="0" x2="30" y2="0" stroke="#f59e0b" stroke-width="4" />
<!-- 把手 -->
<circle cx="20" cy="20" r="6" fill="#fff" />
</g>
</g>
<!-- 视觉引导线和标注文字 -->
<g font-size="11" fill="#64748b" font-family="monospace">
<path d="M 500 350 L 500 300 L 530 300" fill="none" stroke="#64748b" stroke-width="1" />
<text x="535" y="304">弹簧蓄能切断物理连接</text>
<path d="M 750 400 L 800 400 L 800 380" fill="none" stroke="#64748b" stroke-width="1" />
<text x="805" y="375">重型天地锁联动结构</text>
</g>
</svg>
</div>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...