|
|
| 第1行： |
第1行： |
| <html>
| | https://zswikipic.zbc.wiki/hub/2026/08/Bus_T1_2026-08-28_20260828181119_29b2.jpg |
| <div class="zhbus-led-wrapper">
| |
| <div class="zhbus-led-casing">
| |
| <div class="zhbus-screw tl"></div><div class="zhbus-screw tr"></div>
| |
| <div class="zhbus-screw bl"></div><div class="zhbus-screw br"></div>
| |
| | |
| <div class="zhbus-led-screen">
| |
| <!-- 24行硬边缘点阵遮罩层 -->
| |
| <div class="zhbus-led-overlay"></div>
| |
|
| |
| <!-- 滚动文本轨 -->
| |
| <div class="zhbus-led-track" id="zhbusLedTrack">
| |
| <div class="zhbus-led-text" id="zhbusLedContent">加载中...</div>
| |
| <div class="zhbus-led-text" id="zhbusLedContentClone">加载中...</div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <style>
| |
| /* 容器：500px 宽度 */
| |
| .zhbus-led-wrapper {
| |
| width: 500px;
| |
| margin: 15px auto;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* 500px 外壳，高度 70px */ | |
| .zhbus-led-casing {
| |
| width: 500px;
| |
| height: 70px;
| |
| background: linear-gradient(180deg, #23252b 0%, #111215 100%);
| |
| border-radius: 6px;
| |
| padding: 8px 10px;
| |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 255, 255, 0.15);
| |
| border: 2px solid #30333d;
| |
| position: relative;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* 螺丝钉细节 */ | |
| .zhbus-screw {
| |
| position: absolute;
| |
| width: 5px;
| |
| height: 5px;
| |
| background: radial-gradient(circle, #777 30%, #333 80%);
| |
| border-radius: 50%;
| |
| box-shadow: inset 0 0 1px #000;
| |
| }
| |
| .zhbus-screw.tl { top: 4px; left: 4px; }
| |
| .zhbus-screw.tr { top: 4px; right: 4px; }
| |
| .zhbus-screw.bl { bottom: 4px; left: 4px; }
| |
| .zhbus-screw.br { bottom: 4px; right: 4px; }
| |
| | |
| /* 显示屏主区域：高度 50px */ | |
| .zhbus-led-screen {
| |
| position: relative;
| |
| background-color: #000000;
| |
| border-radius: 3px;
| |
| overflow: hidden;
| |
| border: 2px solid #0a0a0c;
| |
| height: 50px;
| |
| display: flex;
| |
| align-items: center;
| |
| box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.98);
| |
| }
| |
| | |
| /* 硬边缘点阵遮罩层：0.7px 到 0.75px 极窄过渡，杜绝灯珠亮一半 */
| |
| .zhbus-led-overlay {
| |
| position: absolute;
| |
| top: 0; left: 0; right: 0; bottom: 0;
| |
| z-index: 10;
| |
| pointer-events: none;
| |
| background-image:
| |
| radial-gradient(circle at 1.04px 1.04px, transparent 0.7px, #000000 0.75px);
| |
| background-size: 2.08px 2.08px;
| |
| }
| |
| | |
| /* 滚动轨 */
| |
| .zhbus-led-track {
| |
| display: flex;
| |
| white-space: nowrap;
| |
| position: absolute;
| |
| will-change: transform;
| |
| }
| |
| | |
| /* 专为 LED 点阵优化的像素字体与渲染 */
| |
| .zhbus-led-text {
| |
| font-family: "SimSun-ExtB", "NSimSun", "SimSun", "Courier New", monospace !important;
| |
| font-size: 42px;
| |
| font-weight: 900;
| |
| color: #ffcc00;
| |
| letter-spacing: 2px;
| |
| line-height: 50px;
| |
| padding-right: 40px;
| |
| display: flex;
| |
| align-items: center;
| |
|
| |
| /* 强制关闭抗锯齿，保留纯粹像素点 */
| |
| -webkit-font-smoothing: none !important;
| |
| -moz-osx-font-smoothing: unset !important;
| |
| font-smooth: never !important;
| |
| | |
| /* 高对比度二值化滤镜 */
| |
| filter: contrast(300%) drop-shadow(0 0 1px #ffc400);
| |
| }
| |
| | |
| /* ※ 间隔符 */
| |
| .zhbus-sep {
| |
| color: #ffcc00;
| |
| font-size: 34px;
| |
| margin: 0 8px;
| |
| font-weight: 900;
| |
| filter: contrast(300%);
| |
| }
| |
| | |
| @keyframes zhbusMarquee {
| |
| 0% { transform: translateX(0); }
| |
| 100% { transform: translateX(-50%); }
| |
| }
| |
| </style>
| |
| | |
| | |
| <script src="https://zsbus.wiki/zhbus-led.js"></script>
| |
| </html>
| |
