这是林泊百科的迁移技术测试站点,所有改动不会同步到林泊百科上,此站点将会在正式迁移后关闭,请勿存放重要数据
模板:Neon
本模板之全部来自用户自定义,依 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}}
霓 虹 呼 吸 灯