这是林泊百科的迁移技术测试站点,所有改动不会同步到林泊百科上,此站点将会在正式迁移后关闭,请勿存放重要数据
模板:Neon:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 标签:(旧)WikiEditor |
无编辑摘要 标签:(旧)WikiEditor |
||
| (未显示同一用户的3个中间版本) | |||
| 第1行: | 第1行: | ||
<includeonly><templatestyles src="Neon/styles.css" />< | <includeonly><templatestyles src="Neon/styles.css" /><span class="{{ {{{|safesubst:}}}#switch: {{{mode|}}} | ||
= | | auto = neon-auto | ||
| hover | |||
| #default = neon-item | |||
}}" style=" | }}" style=" | ||
--glow:{{ {{{|safesubst:}}}#if:{{{color|}}} |{{{color}}}|{{{glow|#ff3377}}}}}; | |||
--font:{{ {{{|safesubst:}}}#if:{{{fontcolor|}}} |{{{fontcolor}}}|{{{font|#fff}}}}}; | |||
--stroke:{{ {{{|safesubst:}}}#if:{{{stroke|}}} |{{{stroke}}}|#fff}}; | |||
{{ {{{|safesubst:}}}#if:{{{delay|}}} |animation-delay:{{{delay}}};|}} | |||
{{ {{{|safesubst:}}}#if:{{{size|}}} |font-size:{{{size}}};|}} | |||
">{{{text|{{PAGENAME}}}}}</span></includeonly> | {{ {{{|safesubst:}}}#if:{{{css|}}} |{{{css}}}|}} | ||
">{{{1|{{{text|{{PAGENAME}}}}}}}}</span></includeonly> | |||
<noinclude> | |||
本模板之全部来自用户自定义,依 CC BY-SA 3.0 授权。 | |||
<nowiki>{{Neon}}</nowiki> 模板用来生成带霓虹呼吸灯效果的文字,像呼吸一样缓缓明暗变化,支持悬停呼吸和自动呼吸两种模式。 | |||
== 语法 == | |||
<pre> | |||
{{Neon|文字|color=颜色|fontcolor=颜色|stroke=颜色|mode=模式|delay=时间|size=字号|css=样式}} | |||
</pre> | |||
== 参数 == | |||
; 1 或 text : 文字内容(必填) | |||
; color 或 glow : 霓虹发光颜色,如 <code>#ff3377</code>、<code>#00eeff</code> | |||
; fontcolor 或 font : 文字本身颜色,默认 <code>#fff</code> | |||
; stroke : 文字描边颜色,默认 <code>#fff</code> | |||
; mode : 呼吸模式 — <code>hover</code>(鼠标悬停呼吸)或 <code>auto</code>(自动呼吸),默认 <code>hover</code> | |||
; delay : 动画延迟时间(仅 auto 模式),如 <code>0.5s</code>、<code>1s</code> | |||
; size : 文字字号,如 <code>24px</code>、<code>2em</code> | |||
; css : 额外 CSS 行内样式 | |||
== 范例 == | |||
{| class="wikitable" width="100%" | |||
! 输入 !! 结果 | |||
|- | |||
|<code><nowiki>{{Neon|Hello World}}</nowiki></code> | |||
|{{Neon|Hello World}} | |||
|- | |||
|<code><nowiki>{{Neon|霓虹文字|color=#ff3377}}</nowiki></code> | |||
|{{Neon|霓虹文字|color=#ff3377}} | |||
|- | |||
|<code><nowiki>{{Neon|青色霓虹|color=#00eeff}}</nowiki></code> | |||
|{{Neon|青色霓虹|color=#00eeff}} | |||
|- | |||
|<code><nowiki>{{Neon|金色文字|color=#ffd700|stroke=#00eeff}}</nowiki></code> | |||
|{{Neon|金色文字|color=#ffd700|stroke=#00eeff}} | |||
|- | |||
|<code><nowiki>{{Neon|自动呼吸|color=#00eeff|mode=auto}}</nowiki></code> | |||
|{{Neon|自动呼吸|color=#00eeff|mode=auto}} | |||
|- | |||
|<code><nowiki>{{Neon|粉字蓝光|color=#00eeff|fontcolor=#ff3377}}</nowiki></code> | |||
|{{Neon|粉字蓝光|color=#00eeff|fontcolor=#ff3377}} | |||
|- | |||
|<code><nowiki>{{Neon|大号标题|color=#ffd700|size=36px}}</nowiki></code> | |||
|{{Neon|大号标题|color=#ffd700|size=36px}} | |||
|} | |||
== 波浪效果 == | |||
多个自动呼吸文字用 <code>delay</code> 错开节奏,形成此起彼伏的波浪感: | |||
{| class="wikitable" width="100%" | |||
! 输入 !! 结果 | |||
|- | |||
|<code><nowiki>{{Neon|●|color=#ff3377|mode=auto|delay=0s}}</nowiki></code> | |||
|{{Neon|●|color=#ff3377|mode=auto|delay=0s}} | |||
|- | |||
|<code><nowiki>{{Neon|●|color=#00eeff|mode=auto|delay=0.5s}}</nowiki></code> | |||
|{{Neon|●|color=#00eeff|mode=auto|delay=0.5s}} | |||
|- | |||
|<code><nowiki>{{Neon|●|color=#ffd700|mode=auto|delay=1s}}</nowiki></code> | |||
|{{Neon|●|color=#ffd700|mode=auto|delay=1s}} | |||
|- | |||
|<code><nowiki>{{Neon|●|color=#7fff00|mode=auto|delay=1.5s}}</nowiki></code> | |||
|{{Neon|●|color=#7fff00|mode=auto|delay=1.5s}} | |||
|} | |||
== 与 Font 模板对比 == | |||
<nowiki>{{Font}}</nowiki> 设置静态颜色,<nowiki>{{Neon}}</nowiki> 增加动态呼吸光效: | |||
{| class="wikitable" width="100%" | |||
! 模板 !! 输入 !! 结果 | |||
|- | |||
! Font | |||
| <code><nowiki>{{Font|color=#ff3377|静态粉色}}</nowiki></code> | |||
| {{Font|color=#ff3377|静态粉色}} | |||
|- | |||
! Neon | |||
| <code><nowiki>{{Neon|动态粉色|color=#ff3377}}</nowiki></code> | |||
| {{Neon|动态粉色|color=#ff3377}} | |||
|- | |||
! Font | |||
| <code><nowiki>{{Font|color=#00eeff|静态青色}}</nowiki></code> | |||
| {{Font|color=#00eeff|静态青色}} | |||
|- | |||
! Neon | |||
| <code><nowiki>{{Neon|动态青色|color=#00eeff|mode=auto}}</nowiki></code> | |||
| {{Neon|动态青色|color=#00eeff|mode=auto}} | |||
|} | |||
== 与 Font 模板套用 == | |||
两个模板可以互相嵌套,各司其职: | |||
=== 方式一:Font 包 Neon(推荐) === | |||
Font 负责字体、背景等样式,Neon 负责发光效果: | |||
{| class="wikitable" width="100%" | |||
! 输入 !! 结果 | |||
|- | |||
|<code><nowiki>{{Font|font=黑体|size=24px|{{Neon|黑体霓虹|color=#ff3377}}}}</nowiki></code> | |||
|{{Font|font=黑体|size=24px|{{Neon|黑体霓虹|color=#ff3377}}}} | |||
|- | |||
|<code><nowiki>{{Font|font=SimSun|size=28px|color=#ffd700|bgcolor=#1a1a1a|{{Neon|金色宋体|color=#ffd700|mode=auto}}}}</nowiki></code> | |||
|{{Font|font=SimSun|size=28px|color=#ffd700|bgcolor=#1a1a1a|{{Neon|金色宋体|color=#ffd700|mode=auto}}}} | |||
|- | |||
|<code><nowiki>{{Font|font=Consolas|size=22px|{{Neon|Code Glow|color=#00eeff|mode=auto|delay=0.5s}}}}</nowiki></code> | |||
|{{Font|font=Consolas|size=22px|{{Neon|Code Glow|color=#00eeff|mode=auto|delay=0.5s}}}} | |||
|} | |||
=== 方式二:Neon 包 Font === | |||
Neon 提供发光背景,Font 控制内部文字细节。注意此时 Font 的 <code>color</code> 会覆盖外层: | |||
{| class="wikitable" width="100%" | |||
! 输入 !! 结果 | |||
|- | |||
|<code><nowiki>{{Neon|{{Font|color=#ffff00|size=20px|内部黄色字}}|color=#ff3377|mode=hover}}</nowiki></code> | |||
|{{Neon|{{Font|color=#ffff00|size=20px|内部黄色字}}|color=#ff3377|mode=hover}} | |||
|} | |||
=== 方式三:css 参数传入字体 === | |||
无需嵌套,直接用 Neon 的 <code>css</code> 参数指定字体: | |||
{| class="wikitable" width="100%" | |||
! 输入 !! 结果 | |||
|- | |||
|<code><nowiki>{{Neon|一行搞定|color=#ff3377|size=26px|css=font-family:黑体;}}</nowiki></code> | |||
|{{Neon|一行搞定|color=#ff3377|size=26px|css=font-family:黑体;}} | |||
|} | |||
=== 实用技巧 === | |||
* Font 的 <code>color</code> 会改变文字颜色,Neon 的 <code>color</code> 是发光颜色 — 两者含义不同,嵌套时注意区分 | |||
* 建议用 Font 在外层统一控制字体和背景,Neon 在内层只负责发光 | |||
* 如果只需要改字体,直接用 Neon 的 <code>css=font-family:...</code> 更简洁 | |||
== 高级用法 == | |||
逐字呼吸效果: | |||
<pre>{{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}}</pre> | |||
<div style="background:#000;border:1px solid #333;border-radius:6px;padding:10px 14px;"> | |||
{{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> | |||
</noinclude> | |||
2026年7月17日 (五) 00:30的最新版本
本模板之全部来自用户自定义,依 CC BY-SA 3.0 授权。 {{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.5s、1s - size
- 文字字号,如
24px、2em - 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}}
|
动态青色 |
与 Font 模板套用
两个模板可以互相嵌套,各司其职:
方式一:Font 包 Neon(推荐)
Font 负责字体、背景等样式,Neon 负责发光效果:
| 输入 | 结果 |
|---|---|
{{Font|font=黑体|size=24px|{{Neon|黑体霓虹|color=#ff3377}}}}
|
黑体霓虹 |
{{Font|font=SimSun|size=28px|color=#ffd700|bgcolor=#1a1a1a|{{Neon|金色宋体|color=#ffd700|mode=auto}}}}
|
金色宋体 |
{{Font|font=Consolas|size=22px|{{Neon|Code Glow|color=#00eeff|mode=auto|delay=0.5s}}}}
|
Code Glow |
方式二:Neon 包 Font
Neon 提供发光背景,Font 控制内部文字细节。注意此时 Font 的 color 会覆盖外层:
| 输入 | 结果 |
|---|---|
{{Neon|{{Font|color=#ffff00|size=20px|内部黄色字}}|color=#ff3377|mode=hover}}
|
内部黄色字
|
方式三:css 参数传入字体
无需嵌套,直接用 Neon 的 css 参数指定字体:
| 输入 | 结果 |
|---|---|
{{Neon|一行搞定|color=#ff3377|size=26px|css=font-family:黑体;}}
|
一行搞定 |
实用技巧
- Font 的
color会改变文字颜色,Neon 的color是发光颜色 — 两者含义不同,嵌套时注意区分 - 建议用 Font 在外层统一控制字体和背景,Neon 在内层只负责发光
- 如果只需要改字体,直接用 Neon 的
css=font-family:...更简洁
高级用法
逐字呼吸效果:
{{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}}
霓 虹 呼 吸 灯