模板:Neon

模板:Documentation

模板说明

霓虹呼吸灯模板可以生成带霓虹发光效果的文字，支持鼠标悬停呼吸和自动呼吸两种模式。

用法

{{Neon|text=Hello World}}
{{Neon|text=霓虹文字|color=#ff3377|mode=auto}}
{{Neon|text=青色呼吸|color=#00eeff|mode=hover|delay=0.5s}}

参数

参数	说明	默认值
text	要显示的文字	页面名称
color 或 glow	霓虹发光颜色	#ff3377
font	文字颜色	#fff
stroke	文字描边颜色	#fff
mode	呼吸模式：hover（悬停）或 auto（自动）	hover
delay	动画延迟（仅 auto 模式生效）	0s
style	额外 CSS 行内样式	—

示例

悬停呼吸（默认）

鼠标悬停发光

自动呼吸

自动呼吸灯效

延迟呼吸（错开节奏）

慢慢呼吸

部署说明

本模板依赖 CSS 样式，有两种部署方式：

方式 A（推荐）：TemplateStyles

1. 创建 Template:Neon/styles.css，将以下内容完整粘贴进去：

/* 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); }
}

1. 确认 Template:Neon/styles.css 的内容模型为 CSS（而非 wikitext），否则样式不会生效。

方式 B：Common.css

将上面的 CSS 代码追加到 MediaWiki:Common.css 末尾。 注意：这种方式会使样式在所有页面加载，可能影响性能。