这是一款悬停时显示跑马灯效果的按钮,基于纯CSS和少量JavaScript实现。当鼠标悬停在按钮上时,按钮内的文本将开始像传统的跑马灯一样滚动。此效果不依赖任何外部库,并且为了确保屏幕阅读器不会重复读取文本,避免了在伪元素中复制文本。
为了保持代码精简与高效,HTML仅包含一个按钮元素,JavaScript和CSS代码量都被控制在极小范围内。此外,该效果是完全响应式的,能够适应不同的屏幕尺寸。不过,为了实现这一效果,需要在生成标记时设置文本长度作为自定义属性,并使用等宽字体以确保text-shadow偏移量的准确性,因为无法为文本阴影偏移使用百分比值。