使用CSS动画替代marquee标签可实现横向、纵向滚动文字效果,通过@keyframes与transform属性控制平滑动画,配合JavaScript实现交互功能,提升兼容性与用户体验。

在早期的网页设计中,marquee 标签被广泛用于创建滚动文字效果。但这个标签早已被现代标准弃用,不推荐在HTML中使用。为了实现更兼容、更可控的滚动文字效果,我们可以使用 CSS 动画 或 JavaScript 来替代。
使用 CSS 实现横向滚动文字
通过 CSS 的 @keyframes 和 transform 属性,可以轻松创建平滑的滚动动画,且无需 JavaScript。
示例代码:
这里是滚动的文字内容,可以是新闻标题或公告信息。
说明:文字从右向左滚动,padding-left: 100% 确保起始位置在容器外右侧,动画将其平移出左侧。
立即学习“前端免费学习笔记(深入)”;
使用 JavaScript 控制滚动行为
如果需要更灵活的控制(如暂停、加速、方向切换),可以用 JavaScript 动态调整元素位置。
示例代码:
用 JavaScript 实现可交互的滚动文字效果。
这种方式适合需要响应用户操作(如鼠标悬停暂停)的场景。
垂直滚动文字(跑马灯式公告)
对于上下滚动的公告栏,也可以用 CSS 动画实现。
第一条公告
第二条公告
第三条公告
这种效果常用于网站顶部的消息通知栏。
基本上就这些。用 CSS 动画替代 marquee 标签,不仅更符合现代网页标准,还能提升性能和可维护性。根据实际需求选择横向或竖向滚动方案,结合:hover 暂停等交互优化用户体验。不复杂但容易忽略细节,比如文本长度与动画时间的匹配。











