这是林泊百科的迁移技术测试站点,所有改动不会同步到林泊百科上,此站点将会在正式迁移后关闭,请勿存放重要数据

模板:Neon:修订间差异

来自Limbo Wiki
跳转到导航 跳转到搜索
Gaoice留言 | 贡献
无编辑摘要
标签(旧)WikiEditor
Gaoice留言 | 贡献
无编辑摘要
标签(旧)WikiEditor
第12行: 第12行:
">{{{1|{{{text|{{PAGENAME}}}}}}}}</span></includeonly>
">{{{1|{{{text|{{PAGENAME}}}}}}}}</span></includeonly>
<noinclude>
<noinclude>
{{Documentation}}
 


<nowiki>{{Neon}}</nowiki> 模板用来生成带霓虹呼吸灯效果的文字,像呼吸一样缓缓明暗变化,支持悬停呼吸和自动呼吸两种模式。
<nowiki>{{Neon}}</nowiki> 模板用来生成带霓虹呼吸灯效果的文字,像呼吸一样缓缓明暗变化,支持悬停呼吸和自动呼吸两种模式。
第103行: 第103行:
{{Neon|霓|color=#ff3377|mode=auto|delay=0s}}{{Neon|虹|color=#ff3377|mode=auto|delay=0.15s}}{{Neon|呼|color=#ff3377|mode=auto|delay=0.3s}}{{Neon|吸|color=#ff3377|mode=auto|delay=0.45s}}{{Neon|灯|color=#ff3377|mode=auto|delay=0.6s}}
{{Neon|霓|color=#ff3377|mode=auto|delay=0s}}{{Neon|虹|color=#ff3377|mode=auto|delay=0.15s}}{{Neon|呼|color=#ff3377|mode=auto|delay=0.3s}}{{Neon|吸|color=#ff3377|mode=auto|delay=0.45s}}{{Neon|灯|color=#ff3377|mode=auto|delay=0.6s}}
</div>
</div>
== 部署说明 ==
本模板依赖 CSS 样式,有两种部署方式:
=== 方式 A(推荐):TemplateStyles ===
创建 <code>Template:Neon/styles.css</code>,内容模型设为 <strong>CSS</strong>,粘贴以下代码:
<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>
=== 方式 B:Common.css ===
将上面 CSS 追加到 <code>MediaWiki:Common.css</code> 末尾。样式会在所有页面加载。
== 参见 ==
* {{Tl|Font}} — 静态文字样式模板
* [[mw:Extension:TemplateStyles|TemplateStyles 扩展]]


</noinclude>
</noinclude>

2026年7月17日 (五) 00:23的版本



{{Neon}} 模板用来生成带霓虹呼吸灯效果的文字,像呼吸一样缓缓明暗变化,支持悬停呼吸和自动呼吸两种模式。

语法

{{Neon|文字|color=颜色|fontcolor=颜色|stroke=颜色|mode=模式|delay=时间|size=字号|css=样式}}

参数

1 或 text
文字内容(必填)
color 或 glow
霓虹发光颜色,如 #ff3377#00eeff
fontcolor 或 font
文字本身颜色,默认 #fff
stroke
文字描边颜色,默认 #fff
mode
呼吸模式 — hover(鼠标悬停呼吸)或 auto(自动呼吸),默认 hover
delay
动画延迟时间(仅 auto 模式),如 0.5s1s
size
文字字号,如 24px2em
css
额外 CSS 行内样式

范例

输入 结果
{{Neon|Hello World}} Hello World
{{Neon|霓虹文字|color=#ff3377}} 霓虹文字
{{Neon|青色霓虹|color=#00eeff}} 青色霓虹
{{Neon|金色文字|color=#ffd700|stroke=#00eeff}} 金色文字
{{Neon|自动呼吸|color=#00eeff|mode=auto}} 自动呼吸
{{Neon|粉字蓝光|color=#00eeff|fontcolor=#ff3377}} 粉字蓝光
{{Neon|大号标题|color=#ffd700|size=36px}} 大号标题

波浪效果

多个自动呼吸文字用 delay 错开节奏,形成此起彼伏的波浪感:

输入 结果
{{Neon|●|color=#ff3377|mode=auto|delay=0s}}
{{Neon|●|color=#00eeff|mode=auto|delay=0.5s}}
{{Neon|●|color=#ffd700|mode=auto|delay=1s}}
{{Neon|●|color=#7fff00|mode=auto|delay=1.5s}}

与 Font 模板对比

{{Font}} 设置静态颜色,{{Neon}} 增加动态呼吸光效:

模板 输入 结果
Font {{Font|color=#ff3377|静态粉色}} 静态粉色
Neon {{Neon|动态粉色|color=#ff3377}} 动态粉色
Font {{Font|color=#00eeff|静态青色}} 静态青色
Neon {{Neon|动态青色|color=#00eeff|mode=auto}} 动态青色

高级用法

逐字呼吸效果:

{{Neon|霓|color=#ff3377|mode=auto|delay=0s}}{{Neon|虹|color=#ff3377|mode=auto|delay=0.15s}}{{Neon|呼|color=#ff3377|mode=auto|delay=0.3s}}{{Neon|吸|color=#ff3377|mode=auto|delay=0.45s}}{{Neon|灯|color=#ff3377|mode=auto|delay=0.6s}}