无限滚动徽标条(CSS 跑马灯)
粘贴徽标的地址,或每行写一句简短短语。代码中会复制一份内容,以便无缝衔接。
使用方法不停滚动的徽标
广告
无限滚动徽标条(CSS 跑马灯): 用途
不停滚动的徽标条用来展示客户、合作伙伴或公司合作的品牌,且不占太多空间。
生成器只用 CSS 制作徽标条:内容被复制一份,动画恰好走完一圈,以便无缝衔接。可选择速度、方向、间距、徽标高度、渐隐的边缘,以及鼠标悬停时变为彩色的灰色徽标。复制的那份对读屏软件隐藏,徽标条在鼠标悬停和聚焦时暂停,对要求减少动态效果的用户则保持静止。
使用方法
- 粘贴徽标地址或输入名称。
- 调整速度、方向和间距。
- 复制代码并粘贴到页面中。
使用场景
- 服务过的客户。
- 店铺经销的品牌。
- 合作伙伴和认证。
常见问题
徽标条是如何无缝衔接的?
内容会并排出现两次,动画恰好移动一半宽度后重新开始。由于后一半与前一半相同,重新开始时看不出痕迹。
无障碍方面呢?
复制出来的那份带有 aria-hidden,因此读屏软件每个徽标只读一次。鼠标悬停或聚焦时动画会暂停;对于要求减少动态效果的用户,徽标条会静止,并可左右滚动。
可以使用品牌徽标吗?
只能使用与你确有关系的品牌(客户、合作伙伴、你经销的品牌),而且最好获得授权。展示并非客户的公司的徽标,会暗示一种并不存在的合作关系。
真的免费吗?
是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。