使用CSS动画替代废弃的marquee标签可实现更高效、兼容性强的滚动文本效果。通过transform与@keyframes结合overflow:hidden控制容器，能创建水平、垂直及无缝循环的滚动动画。水平滚动利用padding-left或双文本复制实现平滑衔接，垂直滚动则通过translateY在固定高度容器内轮播内容。配合animation属性调节速度与方向，提升性能与视觉体验，符合现代Web标准且易于维护扩展。
HTML中的标签虽然能实现文字滚动效果，但早已被现代标准废弃，不推荐在实际项目中使用。更好的方式是采用CSS动画来创建兼容性强、样式可控的滚动文本效果。下面介绍几种基于CSS的替代方案。
使用CSS动画实现水平滚动文本
通过transform和@keyframes可以轻松实现从右向左滚动的文字效果，适用于新闻条、通知栏等场景。
基本结构如下：
这是一段会滚动显示的文本内容，持续循环播放。
CSS样式设置：
立即学习“前端免费学习笔记（深入）”；
.marquee-container { overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box;}.marquee-text {display: inline-block;padding-left: 100%; / 初始位置在容器外右侧 /animation: marquee-scroll 10s linear infinite;}
@keyframes marquee-scroll {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
说明：文本从右向左滑入并完全移出左侧后循环。可通过调整animation-duration控制速度。
无缝循环滚动（首尾衔接）
如果希望滚动过程更平滑、无跳闪，可复制一次内容，让动画结束时下一个内容刚好接上。
HTML结构：
滚动文本示例 滚动文本示例
CSS实现：
.marquee-continuous { overflow: hidden; width: 100%;}.marquee-content {display: inline-block;white-space: nowrap;animation: scroll-left 8s linear infinite;}
@keyframes scroll-left {0% {transform: translateX(0);}100% {transform: translateX(-50%); / 移动一半宽度，实现无缝衔接 /}}
注意：两个重复文本总宽应为容器两倍，动画移动-50%即可完成一次平滑过渡。
垂直滚动文本（上下滚动）
类似新闻ticker或公告栏，可用垂直方向的transform实现。
.marquee-vertical { height: 50px; overflow: hidden; position: relative;}.marquee-vertical-item {position: absolute;white-space: nowrap;animation: slide-up 6s linear infinite;}
@keyframes slide-up {0% {transform: translateY(50px);}100% {transform: translateY(-50px);}}
此方法适合少量条目轮播，若需多条消息切换，建议配合JavaScript控制。
总结
用CSS动画替代不仅符合现代Web标准，还能灵活控制动画速度、方向和行为。关键点包括：使用overflow: hidden隐藏溢出内容，transform提升性能，@keyframes定义动画路径。基本上就这些，不复杂但容易忽略细节。合理运用能让滚动文本既美观又高效。
以上就是怎么在HTML中插入滚动文本_HTML marquee替代方案CSS动画实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587226.html
微信扫一扫 
支付宝扫一扫 
