独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRIZ 最终理想解 - 锥面自定心径向锁死机制</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Noto+Sans+SC:wght@300;500;700&display=swap');
:root {
--bg-color: #07090f;
--grid-color: rgba(45, 55, 72, 0.3);
--shaft-color: #1e293b;
--workpiece-color: #0c4a6e;
--workpiece-stroke: #0284c7;
--ring-color: #d97706;
--ring-glow: #f59e0b;
--nut-color: #334155;
--nut-stroke: #94a3b8;
--text-main: #e2e8f0;
--text-muted: #64748b;
--force-axial: #34d399;
--force-radial: #ef4444;
--hud-accent: #38bdf8;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Noto Sans SC', sans-serif;
overflow: hidden;
background-image: radial-gradient(circle at center, #111827 0%, #030407 100%);
}
.anim-container {
position: relative;
width: 100%;
max-width: 1200px;
aspect-ratio: 16 / 9;
box-shadow: 0 0 50px rgba(0,0,0,0.8) inset;
}
svg {
width: 100%;
height: 100%;
display: block;
}
/* Typography */
.tech-font {
font-family: 'Share Tech Mono', monospace;
}
text {
fill: var(--text-main);
font-size: 14px;
letter-spacing: 1px;
}
.hud-title {
font-size: 16px;
font-weight: 700;
fill: var(--hud-accent);
text-transform: uppercase;
letter-spacing: 2px;
}
.hud-text {
font-size: 12px;
fill: var(--text-muted);
font-weight: 300;
}
.hud-value {
font-size: 13px;
fill: var(--ring-glow);
font-weight: 500;
font-family: 'Share Tech Mono', monospace;
}
/* Animations */
.ring-group {
animation: assemble 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.nut-group {
animation: assembleNut 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.force-axial {
opacity: 0;
animation: showAxial 8s ease-in-out infinite;
}
.force-radial {
opacity: 0;
animation: showRadial 8s ease-in-out infinite;
}
.cone-highlight {
opacity: 0;
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: glowHighlight 8s ease-in-out infinite;
}
.status-text {
opacity: 0;
animation: statusPulse 8s step-end infinite;
}
.rotation-indicator {
opacity: 0;
transform-origin: 500px 520px;
animation: spinIndicator 8s linear infinite;
}
@keyframes assemble {
0%, 15% { transform: translateY(-150px); opacity: 0; }
20% { transform: translateY(-150px); opacity: 1; }
30%, 40% { transform: translateY(0); }
45%, 85% { transform: translateY(8px); } /* Wedged down */
90%, 100% { transform: translateY(-150px); opacity: 0; }
}
@keyframes assembleNut {
0%, 25% { transform: translateY(-200px); opacity: 0; }
30% { transform: translateY(-200px); opacity: 1; }
40% { transform: translateY(0); }
45%, 85% { transform: translateY(8px); } /* Tightened */
90%, 100% { transform: translateY(-200px); opacity: 0; }
}
@keyframes showAxial {
0%, 42% { opacity: 0; transform: translateY(-15px); }
45%, 85% { opacity: 1; transform: translateY(0); }
90%, 100% { opacity: 0; }
}
@keyframes showRadial {
0%, 46% { opacity: 0; transform: scaleX(0.8); transform-origin: center; }
48%, 85% { opacity: 1; transform: scaleX(1); transform-origin: center; }
90%, 100% { opacity: 0; }
}
@keyframes glowHighlight {
0%, 45% { opacity: 0; stroke-dashoffset: 200; }
48% { opacity: 1; stroke-dashoffset: 0; }
49%, 85% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px var(--ring-glow)); }
90%, 100% { opacity: 0; stroke-dashoffset: 200; }
}
@keyframes statusPulse {
0%, 47% { opacity: 0; }
48%, 85% { opacity: 1; }
86%, 100% { opacity: 0; }
}
@keyframes spinIndicator {
0%, 48% { opacity: 0; transform: rotate(0deg) scale(0.8); }
50% { opacity: 1; transform: rotate(30deg) scale(1); }
85% { opacity: 1; transform: rotate(360deg) scale(1); }
86%, 100% { opacity: 0; transform: rotate(360deg); }
}
/* Specific transform origins for radial arrows */
.force-radial-left { transform-origin: 430px 400px; }
.force-radial-right { transform-origin: 570px 400px; }
/* Background grid */
.grid-line {
stroke: var(--grid-color);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
</style>
</head>
<body>
<div class="anim-container">
<svg viewBox="0 0 1000 700" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- Filters -->
<filter id="neon-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Gradients -->
<linearGradient id="shaft-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0f172a" />
<stop offset="20%" stop-color="#1e293b" />
<stop offset="50%" stop-color="#334155" />
<stop offset="80%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</linearGradient>
<linearGradient id="ring-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="#b45309" />
</linearGradient>
<!-- Markers -->
<marker id="arrow-axial" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--force-axial)" />
</marker>
<marker id="arrow-radial" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--force-radial)" />
</marker>
<marker id="arrow-hud" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--hud-accent)" />
</marker>
<!-- Grid Pattern -->
<pattern id="blueprint-grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line"/>
<path d="M 20 0 L 20 40 M 0 20 L 40 20" fill="none" class="grid-line" opacity="0.3"/>
</pattern>
</defs>
<!-- Background Layer -->
<rect width="1000" height="700" fill="url(#blueprint-grid)" />
<!-- Center line -->
<line x1="500" y1="50" x2="500" y2="650" stroke="#475569" stroke-width="1" stroke-dasharray="10 5" opacity="0.5"/>
<!-- ==================== PERIPHERAL HUD & TEXT ==================== -->
<!-- Top Left -->
<g transform="translate(40, 50)">
<text class="tech-font" fill="var(--hud-accent)" font-size="12">[ SYS_ID: TRIZ_IFR_SIMULATION ]</text>
<text class="tech-font" fill="var(--text-muted)" font-size="12" y="20">STATE: <tspan class="status-text" fill="#10b981">LOCKED_OPTIMAL</tspan><tspan fill="#ef4444" opacity="1"> IDLE</tspan></text>
<!-- Obscure IDLE when status-text appears via z-index hack or just let them overlap slightly, better yet, use CSS animation to swap -->
<rect y="8" width="50" height="15" fill="var(--bg-color)" class="status-text"/>
<text class="tech-font status-text" fill="#10b981" font-size="12" y="20">STATE: LOCKED_OPTIMAL</text>
</g>
<!-- Left Information Panel (Constraint & Geometry) -->
<g transform="translate(40, 200)">
<rect x="-10" y="-20" width="220" height="180" fill="rgba(15, 23, 42, 0.6)" stroke="var(--grid-color)" rx="4"/>
<text class="hud-title">■ 结构解耦</text>
<text class="hud-text" y="30">传统方案矛盾：</text>
<text class="hud-text" y="50" fill="#f87171">螺母摩擦力 需兼顾 轴向+径向限位</text>
<text class="hud-text" y="70" fill="#f87171">→ 导致需施加破坏性超大扭矩</text>
<line x1="0" y1="90" x2="180" y2="90" stroke="var(--grid-color)" stroke-width="1"/>
<text class="hud-text" y="115">IFR 理想解：</text>
<text class="hud-text" y="135" fill="#38bdf8">引入 <tspan fill="var(--ring-glow)" font-weight="700">外锥面定心环</tspan></text>
<text class="hud-text" y="155" fill="#38bdf8">几何重构，专职承受径向游隙</text>
</g>
<!-- Right Information Panel (Force Amplification) -->
<g transform="translate(740, 200)">
<rect x="-10" y="-20" width="240" height="180" fill="rgba(15, 23, 42, 0.6)" stroke="var(--grid-color)" rx="4"/>
<text class="hud-title">■ 力学放大倍增</text>
<text class="hud-text" y="30">锥面配合角 (θ) : <tspan class="hud-value">15.0°</tspan></text>
<text class="hud-text" y="50">轴向紧固力 (Fa) : <tspan class="hud-value" fill="var(--force-axial)">轻微 (MIN)</tspan></text>
<text class="hud-text" y="70">接触面贴合度 : <tspan class="hud-value">> 85%</tspan></text>
<line x1="0" y1="90" x2="200" y2="90" stroke="var(--grid-color)" stroke-width="1"/>
<text class="hud-text" y="115">转换方程 (无摩擦理想状态)：</text>
<text class="tech-font" y="135" fill="var(--force-radial)">Fr = Fa / tan(15°)</text>
<text class="hud-text" y="155" fill="#10b981" font-weight="700" class="status-text">径向力激增 3.73 倍 → 绝对自定心</text>
</g>
<!-- Bottom Status Bar -->
<g transform="translate(40, 650)">
<text class="tech-font hud-text" font-size="10">SYS.OP.MODE // CONTINUOUS_AUTO_PLAY</text>
</g>
<!-- ==================== CENTRAL CORE ANIMATION ==================== -->
<!-- Workpiece (The structure being secured, with inner cone) -->
<!-- dx=30, dy=100 for a steep ~16.7 degree cone -->
<!-- Left Side -->
<path d="M 220 600 L 430 600 L 430 450 L 400 350 L 220 350 Z"
fill="var(--workpiece-color)" stroke="var(--workpiece-stroke)" stroke-width="2"/>
<!-- Right Side -->
<path d="M 780 600 L 570 600 L 570 450 L 600 350 L 780 350 Z"
fill="var(--workpiece-color)" stroke="var(--workpiece-stroke)" stroke-width="2"/>
<!-- Hatching effect for workpiece (optional technical detail) -->
<path d="M 230 590 L 420 590 M 230 570 L 420 570 M 230 550 L 420 550" stroke="#0284c7" stroke-width="1" opacity="0.3"/>
<path d="M 770 590 L 580 590 M 770 570 L 580 570 M 770 550 L 580 550" stroke="#0284c7" stroke-width="1" opacity="0.3"/>
<!-- Center Shaft -->
<rect x="450" y="150" width="100" height="500" fill="url(#shaft-grad)" stroke="#64748b" stroke-width="1.5"/>
<!-- Shaft threads visualization (simplified) -->
<g stroke="#334155" stroke-width="2" opacity="0.6">
<line x1="450" y1="170" x2="550" y2="175"/>
<line x1="450" y1="185" x2="550" y2="190"/>
<line x1="450" y1="200" x2="550" y2="205"/>
<line x1="450" y1="215" x2="550" y2="220"/>
<line x1="450" y1="230" x2="550" y2="235"/>
<line x1="450" y1="245" x2="550" y2="250"/>
<line x1="450" y1="260" x2="550" y2="265"/>
<line x1="450" y1="275" x2="550" y2="280"/>
<line x1="450" y1="290" x2="550" y2="295"/>
<line x1="450" y1="305" x2="550" y2="310"/>
</g>
<!-- Dynamic Group: Centering Ring -->
<g class="ring-group">
<!-- Left Wedge -->
<path d="M 397 342 L 448 342 L 448 442 L 427 442 Z" fill="url(#ring-grad)" stroke="#fcd34d" stroke-width="1"/>
<!-- Right Wedge -->
<path d="M 603 342 L 552 342 L 552 442 L 573 442 Z" fill="url(#ring-grad)" stroke="#fcd34d" stroke-width="1"/>
</g>
<!-- Dynamic Group: Fastening Nut -->
<g class="nut-group">
<rect x="360" y="270" width="280" height="70" fill="var(--nut-color)" stroke="var(--nut-stroke)" stroke-width="2" rx="4"/>
<rect x="360" y="280" width="280" height="50" fill="#1e293b" stroke="none"/>
<path d="M 450 270 L 450 340 M 550 270 L 550 340" stroke="var(--nut-stroke)" stroke-width="1" opacity="0.5"/>
<text x="500" y="310" class="tech-font" fill="var(--text-muted)" font-size="14" text-anchor="middle" letter-spacing="4">NUT</text>
</g>
<!-- ==================== FORCE VECTORS & HIGHLIGHTS ==================== -->
<!-- Axial Forces (Light) -->
<g class="force-axial">
<!-- Left Axial -->
<line x1="410" y1="180" x2="410" y2="250" stroke="var(--force-axial)" stroke-width="3" marker-end="url(#arrow-axial)"/>
<text x="410" y="170" fill="var(--force-axial)" text-anchor="middle" font-size="12" class="tech-font">Fa</text>
<!-- Right Axial -->
<line x1="590" y1="180" x2="590" y2="250" stroke="var(--force-axial)" stroke-width="3" marker-end="url(#arrow-axial)"/>
<text x="590" y="170" fill="var(--force-axial)" text-anchor="middle" font-size="12" class="tech-font">Fa</text>
<text x="500" y="255" fill="var(--force-axial)" text-anchor="middle" font-size="12" class="tech-font">LIGHT TORQUE</text>
</g>
<!-- Interface Glowing Lines -->
<g class="cone-highlight">
<!-- Left Cone Surface -->
<line x1="396" y1="345" x2="427" y2="445" stroke="var(--ring-glow)" stroke-width="4" stroke-linecap="round"/>
<!-- Right Cone Surface -->
<line x1="604" y1="345" x2="573" y2="445" stroke="var(--ring-glow)" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- Radial Forces (Massive, amplified) -->
<g class="force-radial">
<g class="force-radial-left">
<!-- Pushing Workpiece Outwards -->
<line x1="415" y1="395" x2="330" y2="395" stroke="var(--force-radial)" stroke-width="6" marker-end="url(#arrow-radial)"/>
<!-- Pushing Shaft Inwards -->
<line x1="415" y1="395" x2="500" y2="395" stroke="var(--force-radial)" stroke-width="6" marker-end="url(#arrow-radial)"/>
<text x="360" y="385" fill="var(--force-radial)" font-size="14" font-weight="700" class="tech-font">Fr (MAX)</text>
</g>
<g class="force-radial-right">
<!-- Pushing Workpiece Outwards -->
<line x1="585" y1="395" x2="670" y2="395" stroke="var(--force-radial)" stroke-width="6" marker-end="url(#arrow-radial)"/>
<!-- Pushing Shaft Inwards -->
<line x1="585" y1="395" x2="500" y2="395" stroke="var(--force-radial)" stroke-width="6" marker-end="url(#arrow-radial)"/>
<text x="640" y="385" fill="var(--force-radial)" font-size="14" font-weight="700" class="tech-font">Fr (MAX)</text>
</g>
</g>
<!-- Rotation & Operation Indicator (Appears when locked) -->
<g class="rotation-indicator">
<path d="M 460 520 A 40 10 0 1 1 540 520" fill="none" stroke="#10b981" stroke-width="2" stroke-dasharray="6 4" marker-end="url(#arrow-axial)"/>
<path d="M 540 520 A 40 10 0 1 1 460 520" fill="none" stroke="#10b981" stroke-width="2" stroke-dasharray="6 4" marker-end="url(#arrow-axial)"/>
</g>
<g class="status-text" transform="translate(500, 560)">
<rect x="-70" y="-15" width="140" height="22" fill="#064e3b" stroke="#10b981" rx="2" opacity="0.9"/>
<text text-anchor="middle" y="0" fill="#34d399" font-size="12" font-weight="700" letter-spacing="1">ZERO CLEARANCE</text>
</g>
<!-- Callout Lines -->
<g stroke="var(--hud-accent)" stroke-width="1" opacity="0.4">
<!-- Left to Ring -->
<polyline points="260,250 310,250 370,360 410,360" fill="none" marker-end="url(#arrow-hud)"/>
<!-- Right to Cone Interface -->
<polyline points="740,250 690,250 630,380 595,380" fill="none" marker-end="url(#arrow-hud)"/>
</g>
</svg>
</div>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...