主要观点:介绍了一个名为 Split Flap 的网页组件,它是对传统列车站标志的一种致敬,能提供独特的文本动画效果,包含多种属性可控制输出,还可通过 ::part() 伪元素进行样式定制,有国际化功能,可定时更换消息,未来对该组件的发展持开放态度,欢迎提出改进建议和报告 bug。
关键信息:
- 可通过
<hotfx-split-flap>
自定义元素使用,需添加脚本,将消息包裹在其中即可开始过渡。 - 接受
width
(每行字符数)、height
(行数)、speed
(字符切换持续时间)等属性控制输出。 - 利用
clip-path
等技术实现字符动画,通过backface-visiblity: hidden
防止字母显示在元素背面。 - 可用 ::part() 伪元素进行样式定制,有多种部分可操作,如
::part(char)
、::part(flap)
等。 - 有
characters
属性可控制显示的字符集,可定时更换消息,对组件发展持开放态度,欢迎反馈。
重要细节: - 费城 30 街车站的 Split Flap 板在 2019 年被拆除,该组件与之类似但有独特优势。
- 若未指定高度和宽度,组件将取内部第一个消息的高度和宽度,更换消息时会截断以适应网格,第一个演示通过创建新元素解决此问题。
- 可通过 GitHub 提交 bug 或功能请求,如希望实现整词显示在一个 flap 上等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。