独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>液压自定心膨胀轴套原理 - TRIZ IFR</title>
<style>
/* 核心美学与重置：极简工业蓝图风格，暗黑科技感 */
:root {
--bg-base: #06090e;
--bg-grid: rgba(45, 60, 80, 0.2);
--bg-grid-thick: rgba(45, 60, 80, 0.4);
--text-main: #c9d1d9;
--text-muted: #8b949e;
--accent-cyan: #00f0ff;
--accent-cyan-glow: rgba(0, 240, 255, 0.6);
--accent-orange: #ff5500;
--metal-dark: #161b22;
--metal-mid: #21262d;
--metal-light: #30363d;
--metal-highlight: #484f58;
--fluid-idle: #0c1a2d;
--fluid-active: #00f0ff;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: var(--bg-base);
background-image:
linear-gradient(var(--bg-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
linear-gradient(var(--bg-grid-thick) 1px, transparent 1px),
linear-gradient(90deg, var(--bg-grid-thick) 1px, transparent 1px);
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
background-position: center center;
color: var(--text-main);
font-family: var(--font-sans);
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* 极简信息面板，绝对定位在边缘，使用超小字号，避免遮挡核心视区 */
.info-panel {
position: absolute;
top: 24px;
left: 24px;
width: 340px;
background: rgba(10, 14, 20, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--metal-light);
border-left: 3px solid var(--accent-cyan);
padding: 20px;
z-index: 100;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.info-panel h1 {
font-size: 14px;
font-weight: 600;
margin: 0 0 12px 0;
color: #fff;
letter-spacing: 1px;
display: flex;
justify-content: space-between;
align-items: center;
}
.info-panel h1::after {
content: 'TRIZ: IFR';
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent-orange);
background: rgba(255, 85, 0, 0.15);
padding: 2px 6px;
border-radius: 3px;
}
.info-panel p {
font-size: 12px;
line-height: 1.6;
margin: 0 0 12px 0;
color: var(--text-muted);
}
.info-panel .highlight { color: var(--accent-cyan); font-weight: 500; }
.data-row {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
border-top: 1px dashed var(--metal-light);
padding-top: 8px;
margin-top: 8px;
}
.data-row span:last-child { color: var(--accent-cyan); }
/* SVG 容器：占据绝对主体 */
.svg-container {
width: 95vw;
height: 95vh;
max-width: 1600px;
max-height: 1000px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
}
svg { width: 100%; height: 100%; }
/* SVG 内部元素样式及动画定义 */
.shaft { fill: url(#shaft-gradient); }
.hub { fill: url(#hub-pattern); stroke: var(--metal-highlight); stroke-width: 1; }
.wall { fill: url(#wall-gradient); stroke: var(--metal-highlight); stroke-width: 0.5; }
.screw-head { fill: url(#screw-gradient); }
.screw-thread { fill: url(#thread-pattern); }
.label-text { font-family: var(--font-mono); font-size: 14px; fill: var(--text-muted); font-weight: 500; }
.label-line { stroke: var(--metal-light); stroke-width: 1; stroke-dasharray: 4, 4; }
/* 状态切换动画 - 总时长 12s, 无限循环 (重载自动执行) */
/* 1. 螺栓推入 */
.anim-screw {
animation: screw-drive 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes screw-drive {
0%, 15% { transform: translateX(0); }
30%, 85% { transform: translateX(-90px); } /* 深入90px */
95%, 100% { transform: translateX(0); }
}
/* 2. 流体加压：颜色与发光变化 */
.anim-fluid {
fill: var(--fluid-idle);
animation: fluid-pressurize 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes fluid-pressurize {
0%, 25% { fill: var(--fluid-idle); filter: none; }
35%, 85% { fill: var(--fluid-active); filter: url(#neon-glow); }
92%, 100% { fill: var(--fluid-idle); filter: none; }
}
/* 3. 压力矢量（帕斯卡原理展示）：箭头淡入并缩放 */
.anim-force {
opacity: 0;
transform-origin: center;
animation: show-force 12s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
.anim-force-delay { animation-delay: 0.2s; }
@keyframes show-force {
0%, 35% { opacity: 0; transform: scale(0.3); }
45%, 80% { opacity: 1; transform: scale(1); }
88%, 100% { opacity: 0; transform: scale(0.3); }
}
/* 4. 壁面形变（消除间隙）：微小位移 */
.anim-wall-top-in { animation: wall-top-in 12s ease-in-out infinite; }
.anim-wall-top-out { animation: wall-top-out 12s ease-in-out infinite; }
.anim-wall-bot-in { animation: wall-bot-in 12s ease-in-out infinite; }
.anim-wall-bot-out { animation: wall-bot-out 12s ease-in-out infinite; }
/* 位移距离对应 6px 间隙 */
@keyframes wall-top-in { 0%, 45% { transform: translateY(0); } 55%, 85% { transform: translateY(6px); } 90%, 100% { transform: translateY(0); } }
@keyframes wall-top-out { 0%, 45% { transform: translateY(0); } 55%, 85% { transform: translateY(-6px); } 90%, 100% { transform: translateY(0); } }
@keyframes wall-bot-in { 0%, 45% { transform: translateY(0); } 55%, 85% { transform: translateY(-6px); } 90%, 100% { transform: translateY(0); } }
@keyframes wall-bot-out { 0%, 45% { transform: translateY(0); } 55%, 85% { transform: translateY(6px); } 90%, 100% { transform: translateY(0); } }
/* 5. 间隙警示线：未锁定状态红闪，锁定消失 */
.anim-gap-warn { animation: gap-warn 12s linear infinite; }
@keyframes gap-warn {
0%, 45% { stroke: #ff3333; opacity: 0.6; stroke-dasharray: 4, 4; }
55%, 85% { stroke: transparent; opacity: 0; }
90%, 100% { stroke: #ff3333; opacity: 0.6; stroke-dasharray: 4, 4; }
}
/* 6. 绝对同心光环定位 */
.anim-concentric {
opacity: 0;
transform-origin: 500px 400px;
animation: concentric-lock 12s ease-out infinite;
}
@keyframes concentric-lock {
0%, 55% { opacity: 0; transform: scale(0.5) rotate(0deg); }
60% { opacity: 1; transform: scale(1.1) rotate(45deg); }
65%, 80% { opacity: 0.8; transform: scale(1) rotate(90deg); }
85%, 100% { opacity: 0; transform: scale(0.5) rotate(90deg); }
}
/* 7. 动态文本切换 */
.text-loose { animation: text-fade-out 12s step-end infinite; }
.text-locked { opacity: 0; animation: text-fade-in 12s step-start infinite; fill: var(--accent-cyan); }
@keyframes text-fade-out { 0%, 50% { opacity: 1; } 50%, 85% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes text-fade-in { 0%, 50% { opacity: 0; } 50%, 85% { opacity: 1; } 85%, 100% { opacity: 0; } }
</style>
</head>
<body>
<!-- 信息悬浮面板 -->
<div class="info-panel">
<h1>液压自定心膨胀套筒</h1>
<p>
传统机械胀套极易导致局部应力集中与偏心。<br>
本方案基于 <span class="highlight">帕斯卡原理 (Pascal's Principle)</span>，提供最终理想解：利用高粘度液压介质在密闭双层薄壁腔内受压。
</p>
<p>
旋紧单颗调压螺柱，介质向各个方向爆发 <span class="highlight">绝对均匀的径向压力</span>，使极薄的金属内/外壁产生微小弹性鼓胀，360°无死角填满间隙，实现零应力集中的绝对同心锁定。
</p>
<div class="data-row">
<span>初始组装间隙</span>
<span>0.05 mm</span>
</div>
<div class="data-row">
<span>密闭腔体压强</span>
<span>~50.0 MPa</span>
</div>
<div class="data-row">
<span>形变层壁厚</span>
<span>0.80 mm</span>
</div>
</div>
<!-- 核心交互式 SVG 动画 -->
<div class="svg-container">
<svg viewBox="0 0 1400 800" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 材质定义 -->
<linearGradient id="shaft-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#484f58" />
<stop offset="50%" stop-color="#8b949e" />
<stop offset="100%" stop-color="#21262d" />
</linearGradient>
<linearGradient id="wall-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8b949e" />
<stop offset="50%" stop-color="#c9d1d9" />
<stop offset="100%" stop-color="#484f58" />
</linearGradient>
<linearGradient id="screw-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#161b22" />
<stop offset="50%" stop-color="#484f58" />
<stop offset="100%" stop-color="#0d1117" />
</linearGradient>
<pattern id="hub-pattern" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="20" height="20" fill="#161b22" />
<line x1="0" y1="0" x2="0" y2="20" stroke="#30363d" stroke-width="2" />
</pattern>
<pattern id="thread-pattern" width="8" height="100" patternUnits="userSpaceOnUse">
<path d="M0,0 L8,4 L0,8 Z" fill="#30363d" />
</pattern>
<!-- 滤镜发光 -->
<filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- 箭头标记 -->
<marker id="arrow-head" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto-start-reverse">
<path d="M 0 0 L 6 3 L 0 6 z" fill="var(--accent-orange)" />
</marker>
<marker id="arrow-head-cyan" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto-start-reverse">
<path d="M 0 0 L 6 3 L 0 6 z" fill="var(--accent-cyan)" />
</marker>
</defs>
<!-- 背景坐标网格辅助线 -->
<g opacity="0.15">
<line x1="500" y1="50" x2="500" y2="750" stroke="#fff" stroke-width="1" stroke-dasharray="10,10" />
<line x1="100" y1="400" x2="1300" y2="400" stroke="#fff" stroke-width="1" stroke-dasharray="10,10" />
</g>
<!-- ================= 静态部件区 ================= -->
<!-- 中心主轴 (Shaft): 绝对中心 Y=400, 半径=120 (Y: 280-520) -->
<rect class="shaft" x="150" y="280" width="800" height="240" rx="4" />
<!-- 外侧孔/基座 (Hub) -->
<!-- 顶半部基座 (Y: 100-202) -->
<path class="hub" d="M 150 100 L 950 100 L 950 202 L 150 202 Z" />
<!-- 底半部基座 (Y: 598-700) -->
<path class="hub" d="M 150 598 L 950 598 L 950 700 L 150 700 Z" />
<!-- ================= 动态形变区 (液压套筒) ================= -->
<!-- 设计说明：套筒静止状态下存在间隙。
内间隙：274-280 (6px), 520-526 (6px)
内壁厚：264-274 (10px), 526-536 (10px)
液压腔：218-264 (46px), 536-582 (46px)
外壁厚：208-218 (10px), 582-592 (10px)
外间隙：202-208 (6px), 592-598 (6px)
-->
<!-- 间隙指示高亮层 -->
<rect class="anim-gap-warn" x="200" y="277" width="600" height="3" fill="none" />
<rect class="anim-gap-warn" x="200" y="205" width="600" height="3" fill="none" />
<rect class="anim-gap-warn" x="200" y="520" width="600" height="3" fill="none" />
<rect class="anim-gap-warn" x="200" y="592" width="600" height="3" fill="none" />
<!-- 流体网络 (连通顶部、底部和右侧压力室) -->
<g>
<!-- 顶部腔体 -->
<rect class="anim-fluid" x="250" y="218" width="600" height="46" rx="2" />
<!-- 底部腔体 -->
<rect class="anim-fluid" x="250" y="536" width="600" height="46" rx="2" />
<!-- 右侧连接管 -->
<rect class="anim-fluid" x="800" y="218" width="50" height="364" />
<!-- 螺栓压力室 (横向) -->
<rect class="anim-fluid" x="850" y="375" width="100" height="50" />
</g>
<!-- 双层薄壁金属管 (形变发生器) -->
<!-- 顶部内壁 -->
<g class="anim-wall-top-in">
<rect class="wall" x="240" y="264" width="620" height="10" rx="2" />
</g>
<!-- 顶部外壁 -->
<g class="anim-wall-top-out">
<rect class="wall" x="240" y="208" width="620" height="10" rx="2" />
</g>
<!-- 底部内壁 -->
<g class="anim-wall-bot-in">
<rect class="wall" x="240" y="526" width="620" height="10" rx="2" />
</g>
<!-- 底部外壁 -->
<g class="anim-wall-bot-out">
<rect class="wall" x="240" y="582" width="620" height="10" rx="2" />
</g>
<!-- 侧边封盖 (固定不形变区) -->
<rect class="wall" x="230" y="208" width="20" height="76" rx="2" />
<rect class="wall" x="230" y="526" width="20" height="66" rx="2" />
<!-- ================= 驱动与压力指示区 ================= -->
<!-- 调压螺栓 (通过CSS动画水平移动推入) -->
<g class="anim-screw">
<!-- 螺栓活塞 -->
<rect class="screw-head" x="930" y="377" width="40" height="46" rx="2" />
<!-- 螺纹杆 -->
<rect class="screw-thread" x="970" y="385" width="120" height="30" />
<!-- 螺栓头部 (内六角) -->
<path class="screw-head" d="M 1090 370 L 1130 370 L 1150 385 L 1150 415 L 1130 430 L 1090 430 Z" stroke="#000" stroke-width="2" />
<path fill="none" stroke="#21262d" stroke-width="3" d="M 1110 385 L 1130 385 L 1140 400 L 1130 415 L 1110 415 L 1100 400 Z" />
</g>
<!-- 帕斯卡原理：均匀分布的压力矢量箭头 (动画出现) -->
<g>
<!-- 顶部向外施压 -->
<g class="anim-force">
<line x1="400" y1="241" x2="400" y2="223" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="550" y1="241" x2="550" y2="223" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="700" y1="241" x2="700" y2="223" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
</g>
<!-- 顶部向内施压 -->
<g class="anim-force anim-force-delay">
<line x1="450" y1="241" x2="450" y2="259" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="600" y1="241" x2="600" y2="259" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="750" y1="241" x2="750" y2="259" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
</g>
<!-- 底部向内施压 -->
<g class="anim-force">
<line x1="400" y1="559" x2="400" y2="541" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="550" y1="559" x2="550" y2="541" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="700" y1="559" x2="700" y2="541" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
</g>
<!-- 底部向外施压 -->
<g class="anim-force anim-force-delay">
<line x1="450" y1="559" x2="450" y2="577" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="600" y1="559" x2="600" y2="577" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
<line x1="750" y1="559" x2="750" y2="577" stroke="var(--accent-orange)" stroke-width="3" marker-end="url(#arrow-head)" />
</g>
</g>
<!-- ================= 绝对同心光环 (锁死时爆出) ================= -->
<g class="anim-concentric">
<circle cx="500" cy="400" r="160" fill="none" stroke="var(--accent-cyan)" stroke-width="2" stroke-dasharray="10, 15" />
<circle cx="500" cy="400" r="180" fill="none" stroke="var(--accent-cyan)" stroke-width="1" opacity="0.5" />
<!-- 十字准星 -->
<line x1="320" y1="400" x2="680" y2="400" stroke="var(--accent-cyan)" stroke-width="1" />
<line x1="500" y1="220" x2="500" y2="580" stroke="var(--accent-cyan)" stroke-width="1" />
</g>
<!-- ================= 数据面板标签区 (SVG内部) ================= -->
<!-- 标签：调压螺柱区 -->
<polyline points="1130,350 1130,310 1200,310" class="label-line" fill="none" />
<text x="1210" y="315" class="label-text">[ 加压调压螺柱 ]</text>
<text x="1210" y="335" class="label-text" fill="var(--metal-highlight)" font-size="12">INPUT: SINGLE POINT</text>
<!-- 标签：液压介质 -->
<polyline points="750,230 750,160 850,160" class="label-line" fill="none" />
<text x="860" y="155" class="label-text">[ 密闭腔体 & 介质 ]</text>
<text x="860" y="175" class="label-text text-loose">P = 0 MPa (IDLE)</text>
<text x="860" y="175" class="label-text text-locked">P = 50 MPa (PASCAL'S LAW)</text>
<!-- 标签：薄壁形变与间隙消除 -->
<polyline points="280,277 150,277 100,277" class="label-line" fill="none" />
<circle cx="280" cy="277" r="3" fill="var(--metal-light)" />
<text x="100" y="265" class="label-text text-loose">间隙状态: 存在 0.05 mm 余量</text>
<text x="100" y="265" class="label-text text-locked">间隙状态: 已彻底消除 (LOCKED)</text>
<text x="100" y="295" class="label-text text-loose" fill="var(--metal-highlight)">同心度: 游离</text>
<text x="100" y="295" class="label-text text-locked" fill="var(--accent-cyan)">同心度: 绝对同心</text>
<!-- 核心原理说明漂浮字 -->
<text x="400" y="70" class="label-text" font-size="18" fill="var(--text-main)" letter-spacing="4">PASCAL'S PRINCIPLE IN ACTION</text>
<text x="400" y="90" class="label-text" font-size="12" fill="var(--accent-orange)">F = P × A (UNIFORM RADIAL EXPANSION)</text>
</svg>
</div>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...