这是一款物理电路开关示意图动画效果，基于纯CSS+SVG技术实现，通过点击开关触发电流流动动画，模拟电路连接与断开的状态变化。部分代码如下：
<svg width="400" height="300" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg"> <!-- Main solid wire (background) --> <path class="wire-path" d="M 170 30 H 260 V 120 M 30 30 V 60 M 30 90 V 120 M 30 120 H 135 M 155 120 H 260 M 30 30 H 120" stroke="currentColor" stroke-width="2" stroke-cap="rounded" fill="none" /> <!-- Animated overlay wire (will "fill" when checked) --> <path class="animated-wire" d="M 170 30 H 260 V 120 M 30 30 V 60 M 30 90 V 120 M 30 120 H 135 M 155 120 H 260 M 30 30 H 120" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="0 400" stroke-dashoffset="400" /> <!-- Switch (open by default) --> <g class="switch"> <line x1="120" y1="30" x2="165" y2="10" stroke="currentColor" stroke-width="2.5" /> <circle cx="120" cy="30" r="4" fill="currentColor" /> <circle cx="170" cy="30" r="4" fill="currentColor" /> </g> <!-- Lightbulb (initially transparent fill) --> <g class="lightbulb" transform="translate(30,75)"> <circle cx="0" cy="0" r="15" stroke="currentColor" stroke-width="2.5" fill="transparent" /> <line x1="-8" y1="8" x2="8" y2="-8" stroke="currentColor" stroke-width="2" /> <line x1="-8" y1="-8" x2="8" y2="8" stroke="currentColor" stroke-width="2" /> </g> <!-- Battery --> <g class="battery" transform="translate(145, 120)"> <rect x="-10" y="-10" width="2.5" height="20" fill="currentColor" /> <rect x="10" y="-15" width="2.5" height="30" fill="currentColor" /> </g> </svg>
