跳转到内容
打开/关闭菜单
  • 1 条目
  • 2 文件
  • 8 用户
  • 590 编辑
ANACHRONISM
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Example:文本滚动条:修订间差异

来自ANACHRONISM
Ancimen​(留言 | 贡献)
无编辑摘要
Ancimen​(留言 | 贡献)
无编辑摘要
第2行: 第2行:


一个可自定义字体、颜色、字号、字间距、方向与端点长度的无缝循环滚动文字条。
一个可自定义字体、颜色、字号、字间距、方向与端点长度的无缝循环滚动文字条。
==== 最简调用 ====
只传内容参数,其余全部使用默认值:
<pre>
{{文本滚动条
| 内容 = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
}}
</pre>
效果:
{{文本滚动条
| 内容 = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
}}


==== 完整调用示例 ====
==== 完整调用示例 ====
第7行: 第23行:
<pre>
<pre>
{{文本滚动条
{{文本滚动条
| 内容    = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
| 内容    = 我是老年土味滚动条
| 字体    = rubik
| 字体    = yahei
| 大小    = 2
| 大小    = 3
| 颜色    = #777777
| 颜色    = #777777
| 字间距  = 0
| 字间距  = 0
| 方向    = left
| 方向    = left
| 端点长度 = 600px
| 端点长度 = 600px
| 间隔    = 2em
| 间隔    = 1em
| 滚动速度 = 10
| 滚动速度 = 5
| 呼吸    = on
| 呼吸    = on
| 呼吸速度 = 5
| 呼吸速度 = 5
| 发光    = off
| 发光    = on
| 发光颜色 = #ff4b27
| 发光颜色 = #ff5527
}}
}}
</pre>
</pre>
第26行: 第42行:


{{文本滚动条
{{文本滚动条
| 内容    = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
| 内容    = 我是老年土味滚动条
| 字体    = rubik
| 字体    = yahei
| 大小    = 2
| 大小    = 3
| 颜色    = #777777
| 颜色    = #777777
| 字间距  = 0
| 字间距  = 0
| 方向    = left
| 方向    = left
| 端点长度 = 600px
| 端点长度 = 600px
| 间隔    = 2em
| 间隔    = 1em
| 滚动速度 = 10
| 滚动速度 = 5
| 呼吸    = on
| 呼吸    = on
| 呼吸速度 = 5
| 呼吸速度 = 5
| 发光    = off
| 发光    = on
| 发光颜色 = #ff4b27
| 发光颜色 = #ff5527
}}
}}



2026年10月5日 (一) 11:00的版本

Template:文本滚动条

一个可自定义字体、颜色、字号、字间距、方向与端点长度的无缝循环滚动文字条。

最简调用

只传内容参数,其余全部使用默认值:

{{文本滚动条
| 内容 = ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI
}}

效果:

ANACHRONISM WIKI ANACHRONISM WIKI ANACHRONISM WIKI

完整调用示例

{{文本滚动条
| 内容     = 我是老年土味滚动条
| 字体     = yahei
| 大小     = 3
| 颜色     = #777777
| 字间距   = 0
| 方向     = left
| 端点长度 = 600px
| 间隔     = 1em
| 滚动速度 = 5
| 呼吸     = on
| 呼吸速度 = 5
| 发光     = on
| 发光颜色 = #ff5527
}}

效果:

我是老年土味滚动条

参数说明

参数 可选值 默认 说明
内容 任意文字 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 控制呼吸周期。