117 lines
8.0 KiB
HTML
117 lines
8.0 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>警示灯图标预览 v2</title>
|
||
|
|
<style>
|
||
|
|
body{font-family:Segoe UI,Microsoft YaHei,sans-serif;background:#f5f5f5;margin:28px;color:#222}
|
||
|
|
h2{margin:0 0 8px;font-size:20px} p{margin:0 0 22px;color:#555;font-size:14px}
|
||
|
|
.row{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
|
||
|
|
.card{background:white;border:1px solid #ddd;border-radius:12px;padding:18px;width:180px;text-align:center;box-shadow:0 2px 10px #0001}
|
||
|
|
.stage{height:100px;display:flex;align-items:center;justify-content:center}
|
||
|
|
.small .stage{height:58px}
|
||
|
|
.label{margin-top:10px;font-size:14px;color:#555}
|
||
|
|
svg.big{width:82px;height:82px} svg.smallIcon{width:34px;height:34px}
|
||
|
|
|
||
|
|
.inactive .glassMain{fill:url(#grayGlass)}
|
||
|
|
.inactive .glassCap{fill:url(#grayCap)}
|
||
|
|
.inactive .rib{stroke:#555}
|
||
|
|
.inactive .baseMain{fill:url(#grayBase)}
|
||
|
|
.inactive .redOnly{opacity:0}
|
||
|
|
|
||
|
|
.active .blinkLayer{animation:hardBlink .72s steps(2,end) infinite}
|
||
|
|
.active .sweep{animation:sweepMove .95s linear infinite}
|
||
|
|
.active .rim{animation:rimBlink .72s steps(2,end) infinite}
|
||
|
|
.active .baseFlash{animation:baseFlash .72s steps(2,end) infinite}
|
||
|
|
|
||
|
|
@keyframes hardBlink{0%,44%{opacity:1}45%,100%{opacity:.42}}
|
||
|
|
@keyframes rimBlink{0%,44%{opacity:1;stroke-width:2.3}45%,100%{opacity:.35;stroke-width:1.2}}
|
||
|
|
@keyframes baseFlash{0%,44%{opacity:1}45%,100%{opacity:.15}}
|
||
|
|
@keyframes sweepMove{from{transform:translateX(-24px)}to{transform:translateX(30px)}}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h2>警示灯图标预览 v2</h2>
|
||
|
|
<p>去掉外部红色光晕，改为灯罩本体强闪 + 内部扫光。小尺寸下动态更明显。</p>
|
||
|
|
<div class="row">
|
||
|
|
<div class="card inactive">
|
||
|
|
<div class="stage">
|
||
|
|
<svg class="big" viewBox="0 0 64 64" role="img" aria-label="inactive warning light">
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="redGlass" cx="34%" cy="16%" r="78%"><stop offset="0" stop-color="#ff8a8a"/><stop offset=".36" stop-color="#df0010"/><stop offset="1" stop-color="#720006"/></radialGradient>
|
||
|
|
<radialGradient id="redCap" cx="38%" cy="12%" r="85%"><stop offset="0" stop-color="#ffb0b0"/><stop offset=".5" stop-color="#f00012"/><stop offset="1" stop-color="#8a0008"/></radialGradient>
|
||
|
|
<radialGradient id="grayGlass" cx="34%" cy="16%" r="78%"><stop offset="0" stop-color="#dedede"/><stop offset=".36" stop-color="#969696"/><stop offset="1" stop-color="#4b4b4b"/></radialGradient>
|
||
|
|
<radialGradient id="grayCap" cx="38%" cy="12%" r="85%"><stop offset="0" stop-color="#f0f0f0"/><stop offset=".5" stop-color="#aaa"/><stop offset="1" stop-color="#5d5d5d"/></radialGradient>
|
||
|
|
<linearGradient id="base" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#3b3b3b"/><stop offset=".45" stop-color="#101010"/><stop offset="1" stop-color="#303030"/></linearGradient>
|
||
|
|
<linearGradient id="grayBase" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#666"/><stop offset=".45" stop-color="#303030"/><stop offset="1" stop-color="#565656"/></linearGradient>
|
||
|
|
<clipPath id="clipGlass"><path d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z"/></clipPath>
|
||
|
|
</defs>
|
||
|
|
<path class="glassMain" d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z" fill="url(#redGlass)"/>
|
||
|
|
<path class="glassCap" d="M15 26C16 11.8 23.8 5 32 5s16 6.8 17 21c-8-3.1-25.9-3.1-34 0z" fill="url(#redCap)" opacity=".95"/>
|
||
|
|
<g opacity=".38" clip-path="url(#clipGlass)"><path class="rib" d="M18 22v23M22 18v27M26 15v30M30 14v31M34 14v31M38 15v30M42 18v27M46 22v23" stroke="#880007" stroke-width="1"/></g>
|
||
|
|
<path d="M25 13l7-3 3 6-8 3zM38 11c4 1 6 3 8 7l-5 2c-1-3-3-4-6-5z" fill="#fff" opacity=".72"/>
|
||
|
|
<ellipse cx="32" cy="44" rx="22" ry="5" fill="#1a0000" opacity=".48"/>
|
||
|
|
<path class="redOnly baseFlash" d="M13 42h38v2H13z" fill="#ff0014"/>
|
||
|
|
<path d="M11 43h42v6H11z" fill="#240004" opacity=".88"/>
|
||
|
|
<path class="baseMain" d="M9 48h46v8c0 3-3 5-6 5H15c-3 0-6-2-6-5z" fill="url(#base)"/>
|
||
|
|
<path d="M13 50h38" stroke="#777" stroke-width="1" opacity=".45"/>
|
||
|
|
<path d="M42 56v4M47 55v4M52 54v3" stroke="#050505" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="label">未激活：灰色静态</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card active">
|
||
|
|
<div class="stage">
|
||
|
|
<svg class="big" viewBox="0 0 64 64" role="img" aria-label="active warning light">
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="redGlass2" cx="34%" cy="16%" r="78%"><stop offset="0" stop-color="#ff8a8a"/><stop offset=".36" stop-color="#df0010"/><stop offset="1" stop-color="#720006"/></radialGradient>
|
||
|
|
<radialGradient id="redCap2" cx="38%" cy="12%" r="85%"><stop offset="0" stop-color="#ffb0b0"/><stop offset=".5" stop-color="#f00012"/><stop offset="1" stop-color="#8a0008"/></radialGradient>
|
||
|
|
<linearGradient id="base2" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#3b3b3b"/><stop offset=".45" stop-color="#101010"/><stop offset="1" stop-color="#303030"/></linearGradient>
|
||
|
|
<clipPath id="clipGlass2"><path d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z"/></clipPath>
|
||
|
|
</defs>
|
||
|
|
<g class="blinkLayer">
|
||
|
|
<path d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z" fill="url(#redGlass2)"/>
|
||
|
|
<path d="M15 26C16 11.8 23.8 5 32 5s16 6.8 17 21c-8-3.1-25.9-3.1-34 0z" fill="url(#redCap2)" opacity=".95"/>
|
||
|
|
</g>
|
||
|
|
<path class="rim" d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z" fill="none" stroke="#ff2635" stroke-width="2"/>
|
||
|
|
<g opacity=".38" clip-path="url(#clipGlass2)"><path d="M18 22v23M22 18v27M26 15v30M30 14v31M34 14v31M38 15v30M42 18v27M46 22v23" stroke="#650005" stroke-width="1"/></g>
|
||
|
|
<g clip-path="url(#clipGlass2)">
|
||
|
|
<path class="sweep" d="M17 6h7l-11 42h-7z" fill="#fff" opacity=".62"/>
|
||
|
|
</g>
|
||
|
|
<path d="M25 13l7-3 3 6-8 3zM38 11c4 1 6 3 8 7l-5 2c-1-3-3-4-6-5z" fill="#fff" opacity=".78"/>
|
||
|
|
<ellipse cx="32" cy="44" rx="22" ry="5" fill="#1a0000" opacity=".48"/>
|
||
|
|
<path class="baseFlash" d="M13 42h38v2H13z" fill="#ff0014"/>
|
||
|
|
<path d="M11 43h42v6H11z" fill="#240004" opacity=".88"/>
|
||
|
|
<path d="M9 48h46v8c0 3-3 5-6 5H15c-3 0-6-2-6-5z" fill="url(#base2)"/>
|
||
|
|
<path d="M13 50h38" stroke="#777" stroke-width="1" opacity=".45"/>
|
||
|
|
<path d="M42 56v4M47 55v4M52 54v3" stroke="#050505" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="label">激活：本体强闪 + 扫光</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card active small">
|
||
|
|
<div class="stage">
|
||
|
|
<svg class="smallIcon" viewBox="0 0 64 64" role="img" aria-label="small active warning light">
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="redGlass3" cx="34%" cy="16%" r="78%"><stop offset="0" stop-color="#ff8a8a"/><stop offset=".36" stop-color="#df0010"/><stop offset="1" stop-color="#720006"/></radialGradient>
|
||
|
|
<linearGradient id="base3" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#3b3b3b"/><stop offset=".45" stop-color="#101010"/><stop offset="1" stop-color="#303030"/></linearGradient>
|
||
|
|
<clipPath id="clipGlass3"><path d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z"/></clipPath>
|
||
|
|
</defs>
|
||
|
|
<path class="blinkLayer" d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z" fill="url(#redGlass3)"/>
|
||
|
|
<path class="rim" d="M14 44V23C14 10.5 22.1 4 32 4s18 6.5 18 19v21z" fill="none" stroke="#ff2635" stroke-width="2"/>
|
||
|
|
<g clip-path="url(#clipGlass3)"><path class="sweep" d="M17 6h8l-11 42h-8z" fill="#fff" opacity=".7"/></g>
|
||
|
|
<path d="M25 13l7-3 3 6-8 3zM38 11c4 1 6 3 8 7l-5 2c-1-3-3-4-6-5z" fill="#fff" opacity=".78"/>
|
||
|
|
<ellipse cx="32" cy="44" rx="22" ry="5" fill="#1a0000" opacity=".48"/>
|
||
|
|
<path class="baseFlash" d="M13 42h38v2H13z" fill="#ff0014"/>
|
||
|
|
<path d="M11 43h42v6H11z" fill="#240004" opacity=".88"/>
|
||
|
|
<path d="M9 48h46v8c0 3-3 5-6 5H15c-3 0-6-2-6-5z" fill="url(#base3)"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="label">34px 小图标预览</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|