独立渲染引擎就绪引擎就绪
<!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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Core Theme Colors */
--bg-dark: #030712;
--bg-panel: rgba(15, 23, 42, 0.65);
--border-panel: rgba(56, 189, 248, 0.2);
--metal-base: #94a3b8;
--metal-highlight: #f8fafc;
--liquid-cyan: #00f0ff;
--soft-orange: #ff6a00;
--soft-glow: #ffea00;
/* Dynamic Variables controlled by JS */
--oil-opacity: 0.85;
--oil-thickness: 16px;
--def-scale: 1.2;
--pulse-speed: 2s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-dark);
background-image:
radial-gradient(circle at 50% 50%, #0f172a 0%, #030712 100%);
color: #e2e8f0;
font-family: 'Noto Sans SC', sans-serif;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* SVG Container */
#animation-container {
position: absolute;
width: 100vw;
height: 100vh;
z-index: 1;
}
svg {
width: 100%;
height: 100%;
display: block;
}
/* UI Overlays */
.overlay-panel {
position: absolute;
z-index: 10;
background: var(--bg-panel);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-panel);
border-radius: 12px;
padding: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.top-left {
top: 40px;
left: 40px;
width: 340px;
}
.bottom-right {
bottom: 40px;
right: 40px;
width: 320px;
}
.bottom-left {
bottom: 40px;
left: 40px;
display: flex;
gap: 20px;
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
padding: 0;
}
/* Typography inside Panels */
.badge {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
background: rgba(0, 240, 255, 0.15);
color: var(--liquid-cyan);
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 12px;
border: 1px solid rgba(0, 240, 255, 0.3);
}
h1 {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.4;
background: linear-gradient(to right, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
font-size: 13px;
line-height: 1.6;
color: #94a3b8;
margin-bottom: 16px;
}
p:last-child {
margin-bottom: 0;
}
/* Interactive Controls */
.control-group {
margin-bottom: 20px;
}
.control-group:last-child { margin-bottom: 0; }
.control-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
font-weight: 500;
color: #cbd5e1;
}
.val-display {
font-family: 'Space Grotesk', sans-serif;
color: var(--liquid-cyan);
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: var(--liquid-cyan);
cursor: pointer;
margin-top: -5px;
box-shadow: 0 0 10px var(--liquid-cyan);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #334155;
border-radius: 2px;
}
/* Legend Items */
.legend-item {
display: flex;
align-items: center;
gap: 10px;
background: rgba(15, 23, 42, 0.8);
padding: 10px 16px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.05);
font-size: 12px;
color: #cbd5e1;
backdrop-filter: blur(8px);
}
.color-box {
width: 12px;
height: 12px;
border-radius: 3px;
}
.color-rigid { background: #94a3b8; }
.color-liquid { background: var(--liquid-cyan); box-shadow: 0 0 8px var(--liquid-cyan); }
.color-soft { background: var(--soft-orange); }
/* SVG Animations */
.wire-flow {
stroke-dasharray: 20 15;
animation: flow 1.5s linear infinite;
}
@keyframes flow {
to { stroke-dashoffset: -35; }
}
.spin-cw {
transform-origin: center;
animation: spin 6s linear infinite;
}
.spin-ccw {
transform-origin: center;
animation: spinReverse 6s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes spinReverse {
100% { transform: rotate(-360deg); }
}
.pulse-glow {
transform-origin: center;
animation: pulse var(--pulse-speed) ease-in-out infinite alternate;
}
@keyframes pulse {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 1; transform: scale(var(--def-scale)); }
}
/* Droplet Animations */
.droplet { opacity: 0; }
.d-top { animation: dropDown 0.8s ease-in infinite; }
.d-bot { animation: dropUp 0.8s ease-in infinite; }
.del-1 { animation-delay: 0.1s; }
.del-2 { animation-delay: 0.3s; }
.del-3 { animation-delay: 0.5s; }
.del-4 { animation-delay: 0.7s; }
@keyframes dropDown {
0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
80% { opacity: 1; }
100% { transform: translate(15px, 60px) scale(0); opacity: 0; }
}
@keyframes dropUp {
0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
80% { opacity: 1; }
100% { transform: translate(15px, -60px) scale(0); opacity: 0; }
}
/* Dynamic CSS bindings applied via inline styles in JS */
.dynamic-film {
opacity: var(--oil-opacity);
stroke-width: var(--oil-thickness);
transition: all 0.3s ease;
}
.dynamic-contact {
transform: scale(var(--def-scale));
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<!-- Abstract Background Animation / SVG Data -->
<div id="animation-container">
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
<defs>
<!-- Gradients -->
<linearGradient id="metal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f8fafc" />
<stop offset="50%" stop-color="#94a3b8" />
<stop offset="100%" stop-color="#475569" />
</linearGradient>
<linearGradient id="dark-metal" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</linearGradient>
<linearGradient id="pu-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff8c00" />
<stop offset="100%" stop-color="#cc5500" />
</linearGradient>
<linearGradient id="fluid-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="transparent" />
<stop offset="20%" stop-color="transparent" />
<stop offset="25%" stop-color="#00f0ff" />
<stop offset="100%" stop-color="#00f0ff" />
</linearGradient>
<!-- Filters -->
<filter id="neon-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="8" result="blur1" />
<feGaussianBlur stdDeviation="16" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="blur1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="15" stdDeviation="15" flood-color="#000" flood-opacity="0.8" />
</filter>
<!-- Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 40 40 M 0 40 L 40 40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
</pattern>
<clipPath id="film-clip">
<rect x="250" y="0" width="1400" height="900" />
</clipPath>
</defs>
<!-- Background Grid -->
<rect width="100%" height="100%" fill="url(#grid)" />
<!-- Machine Housing Background Accents -->
<path d="M 100 0 L 400 900 L 0 900 Z" fill="rgba(15,23,42,0.3)" />
<path d="M 1500 0 L 1200 900 L 1600 900 Z" fill="rgba(15,23,42,0.3)" />
<!-- Center Guiding Line for Reference -->
<line x1="0" y1="450" x2="1600" y2="450" stroke="rgba(255,255,255,0.05)" stroke-width="1" stroke-dasharray="5 5" />
<!-- WIRE SYSTEM -->
<g id="wire-system" filter="url(#shadow)">
<!-- 1. The Dynamic Liquid Film (Cyan Glow behind/around wire) -->
<!-- Only starts after the oil chamber (X ~ 280) -->
<path class="dynamic-film"
d="M 0 450 L 250 450 C 350 450, 450 465, 550 465 C 750 465, 800 435, 950 435 C 1100 435, 1150 450, 1250 450 L 1600 450"
fill="none" stroke="url(#fluid-grad)" stroke-linecap="round" filter="url(#neon-glow)" />
<!-- 2. The Rigid Wire Core (Silver) -->
<path id="main-wire"
d="M -50 450 L 250 450 C 350 450, 450 465, 550 465 C 750 465, 800 435, 950 435 C 1100 435, 1150 450, 1250 450 L 1650 450"
fill="none" stroke="url(#metal-grad)" stroke-width="14" stroke-linecap="round" />
<!-- 3. Wire Flow Indicator (Scrolling dashed line to show movement direction) -->
<path d="M -50 450 L 250 450 C 350 450, 450 465, 550 465 C 750 465, 800 435, 950 435 C 1100 435, 1150 450, 1250 450 L 1650 450"
fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.6" class="wire-flow" />
</g>
<!-- OIL MIST SPRAY CHAMBER (The "Liquid" Phase) -->
<g id="oil-chamber" transform="translate(180, 250)">
<!-- Chamber Back -->
<rect x="0" y="0" width="120" height="400" rx="8" fill="url(#dark-metal)" stroke="#1e293b" stroke-width="4" filter="url(#shadow)" />
<!-- Glass Window -->
<rect x="15" y="50" width="90" height="300" rx="4" fill="rgba(0, 240, 255, 0.05)" stroke="var(--liquid-cyan)" stroke-width="2" opacity="0.7"/>
<!-- Top Nozzle -->
<path d="M 40 50 L 80 50 L 70 80 L 50 80 Z" fill="#94a3b8" />
<rect x="55" y="80" width="10" height="20" fill="#cbd5e1" />
<!-- Bottom Nozzle -->
<path d="M 40 350 L 80 350 L 70 320 L 50 320 Z" fill="#94a3b8" />
<rect x="55" y="300" width="10" height="20" fill="#cbd5e1" />
<!-- Animated Droplets (Top) -->
<circle cx="50" cy="110" r="3" fill="var(--liquid-cyan)" class="droplet d-top del-1" filter="url(#neon-glow)" />
<circle cx="70" cy="100" r="4" fill="var(--liquid-cyan)" class="droplet d-top del-2" filter="url(#neon-glow)" />
<circle cx="60" cy="120" r="2.5" fill="var(--liquid-cyan)" class="droplet d-top del-3" filter="url(#neon-glow)" />
<!-- Animated Droplets (Bottom) -->
<circle cx="55" cy="290" r="3.5" fill="var(--liquid-cyan)" class="droplet d-bot del-4" filter="url(#neon-glow)" />
<circle cx="65" cy="280" r="3" fill="var(--liquid-cyan)" class="droplet d-bot del-1" filter="url(#neon-glow)" />
<circle cx="45" cy="270" r="2" fill="var(--liquid-cyan)" class="droplet d-bot del-2" filter="url(#neon-glow)" />
<!-- Tech Details -->
<text x="60" y="30" fill="var(--liquid-cyan)" font-family="Space Grotesk" font-size="10" text-anchor="middle" font-weight="600" letter-spacing="1">LUBRICANT</text>
<line x1="-20" y1="200" x2="140" y2="200" stroke="rgba(0, 240, 255, 0.3)" stroke-width="1" stroke-dasharray="2 4"/>
</g>
<!-- ROTARY STRAIGHTENER ROLLERS (The "Soft" Phase) -->
<!-- Roller 1 (Top Left) -->
<!-- Center: cx=550, cy=285, R=180. Wire is at y=465, so perfectly tangent -->
<g id="roller-1" transform="translate(550, 285)" filter="url(#shadow)">
<!-- PU Composite Outer Layer (Soft Layer) -->
<circle cx="0" cy="0" r="180" fill="url(#pu-grad)" stroke="#ffb700" stroke-width="4" />
<circle cx="0" cy="0" r="160" fill="url(#dark-metal)" />
<!-- Rotating Inner Metallic Core -->
<g class="spin-cw">
<circle cx="0" cy="0" r="140" fill="none" stroke="url(#metal-grad)" stroke-width="20" stroke-dasharray="40 20" />
<circle cx="0" cy="0" r="60" fill="url(#metal-grad)" />
<!-- Spokes -->
<line x1="0" y1="-60" x2="0" y2="-130" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="0" y1="60" x2="0" y2="130" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="-60" y1="0" x2="-130" y2="0" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="60" y1="0" x2="130" y2="0" stroke="url(#metal-grad)" stroke-width="16" />
<circle cx="0" cy="0" r="20" fill="#1e293b" />
</g>
</g>
<!-- Roller 2 (Bottom Middle) -->
<!-- Center: cx=950, cy=615, R=180. Wire is at y=435 -->
<g id="roller-2" transform="translate(950, 615)" filter="url(#shadow)">
<!-- PU Composite Outer Layer -->
<circle cx="0" cy="0" r="180" fill="url(#pu-grad)" stroke="#ffb700" stroke-width="4" />
<circle cx="0" cy="0" r="160" fill="url(#dark-metal)" />
<!-- Rotating Inner Metallic Core -->
<g class="spin-ccw">
<circle cx="0" cy="0" r="140" fill="none" stroke="url(#metal-grad)" stroke-width="20" stroke-dasharray="40 20" />
<circle cx="0" cy="0" r="60" fill="url(#metal-grad)" />
<!-- Spokes -->
<line x1="0" y1="-60" x2="0" y2="-130" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="0" y1="60" x2="0" y2="130" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="-60" y1="0" x2="-130" y2="0" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="60" y1="0" x2="130" y2="0" stroke="url(#metal-grad)" stroke-width="16" />
<circle cx="0" cy="0" r="20" fill="#1e293b" />
</g>
</g>
<!-- Roller 3 (Top Right) -->
<!-- Center: cx=1250, cy=270, R=180. Wire is at y=450 -->
<g id="roller-3" transform="translate(1250, 270)" filter="url(#shadow)">
<!-- PU Composite Outer Layer -->
<circle cx="0" cy="0" r="180" fill="url(#pu-grad)" stroke="#ffb700" stroke-width="4" />
<circle cx="0" cy="0" r="160" fill="url(#dark-metal)" />
<!-- Rotating Inner Metallic Core -->
<g class="spin-cw">
<circle cx="0" cy="0" r="140" fill="none" stroke="url(#metal-grad)" stroke-width="20" stroke-dasharray="40 20" />
<circle cx="0" cy="0" r="60" fill="url(#metal-grad)" />
<!-- Spokes -->
<line x1="0" y1="-60" x2="0" y2="-130" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="0" y1="60" x2="0" y2="130" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="-60" y1="0" x2="-130" y2="0" stroke="url(#metal-grad)" stroke-width="16" />
<line x1="60" y1="0" x2="130" y2="0" stroke="url(#metal-grad)" stroke-width="16" />
<circle cx="0" cy="0" r="20" fill="#1e293b" />
</g>
</g>
<!-- IFR CORE HIGHLIGHTS: Dynamic Micro-deformation Contact Zones -->
<!-- These glowing ellipses visually represent the PU layer yielding and absorbing the stress,
preventing metal-on-metal scratch. Modulated by the slider. -->
<g id="contact-glows" filter="url(#soft-glow)">
<!-- Contact 1 -->
<ellipse cx="550" cy="465" rx="35" ry="12" fill="var(--soft-glow)" class="pulse-glow dynamic-contact" />
<!-- Contact 2 -->
<ellipse cx="950" cy="435" rx="35" ry="12" fill="var(--soft-glow)" class="pulse-glow dynamic-contact" />
<!-- Contact 3 -->
<ellipse cx="1250" cy="450" rx="35" ry="12" fill="var(--soft-glow)" class="pulse-glow dynamic-contact" />
</g>
<!-- SVG Annotation Lines mapping concepts -->
<g stroke="rgba(255,255,255,0.3)" stroke-width="1" fill="none" stroke-dasharray="2 4">
<!-- Pointer to Oil Film -->
<path d="M 430 450 L 400 350 L 320 350" />
<circle cx="430" cy="450" r="3" fill="var(--liquid-cyan)" />
<!-- Pointer to PU Deformation -->
<path d="M 550 465 L 550 560 L 600 560" />
<circle cx="550" cy="465" r="3" fill="var(--soft-glow)" />
</g>
<!-- Minimal Inline SVG Labels -->
<text x="310" y="345" fill="var(--liquid-cyan)" font-size="12" font-family="Noto Sans SC">动态润滑油膜 (0.2MPa)</text>
<text x="610" y="565" fill="var(--soft-orange)" font-size="12" font-family="Noto Sans SC">聚氨酯微观弹性形变 (Shore 90A)</text>
</svg>
</div>
<!-- Foreground UI: Top Left Conceptual Description -->
<div class="overlay-panel top-left">
<div class="badge">TRIZ 最终理想解 (IFR)</div>
<h1>刚-液-柔<br>多层缓冲复合接触</h1>
<p>直接阻断金属间的直接摩擦以防止划伤。在保留低成本旋转矫直机构的前提下，巧妙引入流体动力润滑层与非金属软接触面。</p>
<p>通过聚氨酯（PU）复合轮的微观让位弹性，搭配 0.2MPa 极压抗磨油膜，将尖锐的接触应力完美吸收，实现无损高精矫直。</p>
</div>
<!-- Foreground UI: Bottom Right Interactive Controls -->
<div class="overlay-panel bottom-right">
<div class="control-group">
<div class="control-header">
<span>润滑油膜供给压力 (液)</span>
<span class="val-display" id="val-oil">0.20 MPa</span>
</div>
<input type="range" id="slider-oil" min="0.05" max="0.5" step="0.01" value="0.2">
<p style="font-size: 11px; margin-top: 6px; opacity: 0.7;">动态液膜承受剪切力，阻断直接摩擦</p>
</div>
<div class="control-group" style="margin-top: 24px;">
<div class="control-header">
<span style="color: var(--soft-orange)">聚氨酯包覆层硬度 (柔)</span>
<span class="val-display" style="color: var(--soft-orange)" id="val-pu">Shore 90A</span>
</div>
<input type="range" id="slider-pu" min="80" max="100" step="1" value="90">
<p style="font-size: 11px; margin-top: 6px; opacity: 0.7;">硬度越低，微观让位弹性形变越显著</p>
</div>
</div>
<!-- Foreground UI: Bottom Left Visual Legend -->
<div class="bottom-left">
<div class="legend-item">
<div class="color-box color-rigid"></div>
<span>金属刚性体 (原系统)</span>
</div>
<div class="legend-item">
<div class="color-box color-liquid"></div>
<span>流体隔离层 (新引入)</span>
</div>
<div class="legend-item">
<div class="color-box color-soft"></div>
<span>柔性吸收层 (改造资源)</span>
</div>
</div>
<script>
// Interactive functionality to demonstrate the dynamic relationship
// without stopping the continuous auto-play animation.
const sliderOil = document.getElementById('slider-oil');
const valOil = document.getElementById('val-oil');
const sliderPu = document.getElementById('slider-pu');
const valPu = document.getElementById('val-pu');
const root = document.documentElement;
// Oil Pressure Controls (Adjusts Cyan Glow Opacity & Thickness)
sliderOil.addEventListener('input', (e) => {
const val = parseFloat(e.target.value);
valOil.textContent = val.toFixed(2) + ' MPa';
// Map 0.05 - 0.5 to opacity 0.3 - 1.0
const opacity = 0.3 + ((val - 0.05) / 0.45) * 0.7;
// Map 0.05 - 0.5 to thickness 8px - 24px
const thickness = 8 + ((val - 0.05) / 0.45) * 16;
root.style.setProperty('--oil-opacity', opacity);
root.style.setProperty('--oil-thickness', thickness + 'px');
});
// PU Hardness Controls (Adjusts Deformation Scale / Soft Glow Size)
sliderPu.addEventListener('input', (e) => {
const val = parseInt(e.target.value);
valPu.textContent = 'Shore ' + val + 'A';
// Inverse mapping: lower hardness (80) = more deformation (scale 1.8)
// higher hardness (100) = less deformation (scale 0.8)
const scale = 1.8 - ((val - 80) / 20) * 1.0;
// Faster pulse on softer material
const speed = 1.0 + ((val - 80) / 20) * 2.0;
root.style.setProperty('--def-scale', scale);
root.style.setProperty('--pulse-speed', speed + 's');
});
// Ensure animations reset and play flawlessly if container reloads
document.addEventListener("DOMContentLoaded", () => {
// Trigger initial CSS variable computation
sliderOil.dispatchEvent(new Event('input'));
sliderPu.dispatchEvent(new Event('input'));
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...