|
|
| 第25行： |
第25行： |
| {{{style|}}} | | {{{style|}}} |
| ">{{{text|{{PAGENAME}}}}}</span></includeonly> | | ">{{{text|{{PAGENAME}}}}}</span></includeonly> |
| <noinclude>
| |
| {{Documentation}}
| |
|
| |
| == 模板说明 ==
| |
| '''霓虹呼吸灯'''模板可以生成带霓虹发光效果的文字，支持'''鼠标悬停呼吸'''和'''自动呼吸'''两种模式。
| |
|
| |
| == 用法 ==
| |
| <pre>
| |
| {{Neon|text=Hello World}}
| |
| {{Neon|text=霓虹文字|color=#ff3377|mode=auto}}
| |
| {{Neon|text=青色呼吸|color=#00eeff|mode=hover|delay=0.5s}}
| |
| </pre>
| |
|
| |
| == 参数 ==
| |
| {| class="wikitable"
| |
| ! 参数 !! 说明 !! 默认值
| |
| |-
| |
| | <code>text</code> || 要显示的文字 || 页面名称
| |
| |-
| |
| | <code>color</code> 或 <code>glow</code> || 霓虹发光颜色 || <code>#ff3377</code>
| |
| |-
| |
| | <code>font</code> || 文字颜色 || <code>#fff</code>
| |
| |-
| |
| | <code>stroke</code> || 文字描边颜色 || <code>#fff</code>
| |
| |-
| |
| | <code>mode</code> || 呼吸模式：<code>hover</code>（悬停）或 <code>auto</code>（自动） || <code>hover</code>
| |
| |-
| |
| | <code>delay</code> || 动画延迟（仅 auto 模式生效） || <code>0s</code>
| |
| |-
| |
| | <code>style</code> || 额外 CSS 行内样式 || —
| |
| |}
| |
|
| |
| == 示例 ==
| |
| ; 悬停呼吸（默认）
| |
| {{Neon|text=鼠标悬停发光|color=#ff3377}}
| |
|
| |
| ; 自动呼吸
| |
| {{Neon|text=自动呼吸灯效|color=#00eeff|mode=auto}}
| |
|
| |
| ; 延迟呼吸（错开节奏）
| |
| {{Neon|text=慢慢呼吸|color=#ffd700|mode=auto|delay=1s}}
| |
|
| |
| == 部署说明 ==
| |
| 本模板依赖 CSS 样式，有两种部署方式：
| |
|
| |
| === 方式 A（推荐）：TemplateStyles ===
| |
| # 创建 <code>Template:Neon/styles.css</code>，将以下内容完整粘贴进去：
| |
| <pre>
| |
| /* Template:Neon/styles.css — 霓虹呼吸灯样式 */
| |
| .neon-item {
| |
| margin: 0;
| |
| cursor: pointer;
| |
| display: inline-block;
| |
| background: #000;
| |
| color: var(--font, #fff);
| |
| text-shadow: 0 0 2px var(--stroke, #fff), 0 0 6px var(--glow, #0ff), 0 0 12px var(--glow);
| |
| transition: text-shadow 0.15s ease;
| |
| }
| |
| .neon-item:hover {
| |
| animation: neon-breathe 2s ease-in-out infinite;
| |
| }
| |
| .neon-auto {
| |
| margin: 0;
| |
| display: inline-block;
| |
| background: #000;
| |
| color: var(--font, #fff);
| |
| animation: neon-breathe 2.5s ease-in-out infinite;
| |
| }
| |
| @keyframes neon-breathe {
| |
| 0% { text-shadow: 0 0 2px var(--stroke), 0 0 8px var(--glow), 0 0 16px var(--glow), 0 0 30px var(--glow); }
| |
| 50% { text-shadow: 0 0 2px var(--stroke), 0 0 16px var(--glow), 0 0 40px var(--glow), 0 0 70px var(--glow), 0 0 100px var(--glow); }
| |
| 100% { text-shadow: 0 0 2px var(--stroke), 0 0 8px var(--glow), 0 0 16px var(--glow), 0 0 30px var(--glow); }
| |
| }
| |
| </pre>
| |
| # 确认 <code>Template:Neon/styles.css</code> 的内容模型为 <code>CSS</code>（而非 wikitext），否则样式不会生效。
| |
|
| |
| === 方式 B：Common.css ===
| |
| 将上面的 CSS 代码追加到 <code>MediaWiki:Common.css</code> 末尾。
| |
| 注意：这种方式会使样式在所有页面加载，可能影响性能。
| |
|
| |
| </noinclude>
| |