Example:文本滚动条：修订间差异
来自ANACHRONISM
更多操作
创建页面，内容为“Template:文本滚动条” |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
[[Template:文本滚动条]] | [[Template:文本滚动条]] | ||
一个可自定义字体、颜色、字号、字间距、方向与端点长度的无缝循环滚动文字条。 | |||
==== 完整调用示例 ==== | |||
<pre> | |||
{{文本滚动条 | |||
| 内容 = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI | |||
| 字体 = rubik | |||
| 大小 = 2 | |||
| 颜色 = #777777 | |||
| 字间距 = 0 | |||
| 方向 = left | |||
| 端点长度 = 600px | |||
| 间隔 = 2em | |||
| 滚动速度 = 10 | |||
| 呼吸 = on | |||
| 呼吸速度 = 5 | |||
| 发光 = off | |||
| 发光颜色 = #ff4b27 | |||
}} | |||
</pre> | |||
效果： | |||
{{文本滚动条 | |||
| 内容 = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI | |||
| 字体 = rubik | |||
| 大小 = 2 | |||
| 颜色 = #777777 | |||
| 字间距 = 0 | |||
| 方向 = left | |||
| 端点长度 = 600px | |||
| 间隔 = 2em | |||
| 滚动速度 = 10 | |||
| 呼吸 = on | |||
| 呼吸速度 = 5 | |||
| 发光 = off | |||
| 发光颜色 = #ff4b27 | |||
}} | |||
==== 参数说明 ==== | |||
{| class="wikitable" | |||
! 参数 !! 可选值 !! 默认 !! 说明 | |||
|- | |||
| 内容 || 任意文字 || ANACHRONISM WIKI || 滚动的文字，建议重复至长度超过端点长度，避免出现空白期 | |||
|- | |||
| 字体 || 字体类后缀，如 rubik、yahei、milton、narrow、seldom、script、rogue、anurati、mono || rubik || 文字字体 | |||
|- | |||
| 大小 || 任意数字 || 3 || 字号，单位 em，只写数字 | |||
|- | |||
| 颜色 || 任意颜色值 || #777777 || 文字颜色 | |||
|- | |||
| 字间距 || 任意数字 || 0 || 字间距，单位 em，只写数字 | |||
|- | |||
| 方向 || left / right / up / down || left || 滚动方向 | |||
|- | |||
| 端点长度 || 任意长度值，如 600px、50%、20em || 水平 100%，垂直 8em || 滚动窗口尺寸，水平方向为宽度，垂直方向为高度 | |||
|- | |||
| 间隔 || 任意长度值 || 2em || 两份复制内容之间的空隙 | |||
|- | |||
| 滚动速度 || 任意数字 || 10 || 单程周期，单位秒，只写数字 | |||
|- | |||
| 呼吸 || on / off || on || 是否呼吸显隐 | |||
|- | |||
| 呼吸速度 || 任意数字 || 5 || 呼吸周期，单位秒，只写数字 | |||
|- | |||
| 发光 || on / off || off || 是否边缘发光 | |||
|- | |||
| 发光颜色 || 任意颜色值 || #ff4b27 || 发光颜色，仅发光开启时生效 | |||
|} | |||
==== 注意事项 ==== | |||
* 组件采用双份内容无缝循环：动画位移为单份内容宽度的两倍，一份滚出另一端时另一份补上。 | |||
* 为保证无缝效果，<code>内容</code> 的宽度应不小于 <code>端点长度</code>，否则窗口内会出现空白期。文字较短时，把内容重复写几遍即可。 | |||
* 水平方向 <code>端点长度</code> 默认为 <code>100%</code>，撑满父容器；垂直方向默认为 <code>8em</code>，宽度固定 <code>1.2em</code> 一个字宽。 | |||
* 垂直方向会自动将字符逐字换行，<code>word-break:break-all</code> 对英文字母同样生效。 | |||
* <code>字体</code> 参数传字体类后缀即可，不加 <code>font-</code> 前缀，例如传 <code>yahei</code> 对应 <code>font-yahei</code>。 | |||
* 字体类来自 [[MediaWiki:Citizen.css]]，详见 [[Example:字体调用]]。 | |||
* 呼吸效果使用 <code>fx-text-breath</code> 类，发光使用 <code>fx-text-pulse</code> 类，参数 <code>--fx-speed</code> 控制呼吸周期。 | |||
2026年10月5日 (一) 10:55的版本
一个可自定义字体、颜色、字号、字间距、方向与端点长度的无缝循环滚动文字条。
完整调用示例
{{文本滚动条
| 内容 = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
| 字体 = rubik
| 大小 = 2
| 颜色 = #777777
| 字间距 = 0
| 方向 = left
| 端点长度 = 600px
| 间隔 = 2em
| 滚动速度 = 10
| 呼吸 = on
| 呼吸速度 = 5
| 发光 = off
| 发光颜色 = #ff4b27
}}
效果：
ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
参数说明
| 参数 | 可选值 | 默认 | 说明 |
|---|---|---|---|
| 内容 | 任意文字 | ANACHRONISM WIKI | 滚动的文字，建议重复至长度超过端点长度，避免出现空白期 |
| 字体 | 字体类后缀，如 rubik、yahei、milton、narrow、seldom、script、rogue、anurati、mono | rubik | 文字字体 |
| 大小 | 任意数字 | 3 | 字号，单位 em，只写数字 |
| 颜色 | 任意颜色值 | #777777 | 文字颜色 |
| 字间距 | 任意数字 | 0 | 字间距，单位 em，只写数字 |
| 方向 | left / right / up / down | left | 滚动方向 |
| 端点长度 | 任意长度值，如 600px、50%、20em | 水平 100%，垂直 8em | 滚动窗口尺寸，水平方向为宽度，垂直方向为高度 |
| 间隔 | 任意长度值 | 2em | 两份复制内容之间的空隙 |
| 滚动速度 | 任意数字 | 10 | 单程周期，单位秒，只写数字 |
| 呼吸 | on / off | on | 是否呼吸显隐 |
| 呼吸速度 | 任意数字 | 5 | 呼吸周期，单位秒，只写数字 |
| 发光 | on / off | off | 是否边缘发光 |
| 发光颜色 | 任意颜色值 | #ff4b27 | 发光颜色，仅发光开启时生效 |
注意事项
- 组件采用双份内容无缝循环：动画位移为单份内容宽度的两倍，一份滚出另一端时另一份补上。
- 为保证无缝效果，
内容的宽度应不小于端点长度，否则窗口内会出现空白期。文字较短时，把内容重复写几遍即可。 - 水平方向
端点长度默认为100%，撑满父容器；垂直方向默认为8em，宽度固定1.2em一个字宽。 - 垂直方向会自动将字符逐字换行，
word-break:break-all对英文字母同样生效。 字体参数传字体类后缀即可，不加font-前缀，例如传yahei对应font-yahei。- 字体类来自 MediaWiki:Citizen.css，详见 Example:字体调用。
- 呼吸效果使用
fx-text-breath类，发光使用fx-text-pulse类，参数--fx-speed控制呼吸周期。