怎么在HTML中插入滚动文本_HTML marquee替代方案CSS动画实现_技术学堂

怎么在HTML中插入滚动文本_HTML marquee替代方案CSS动画实现

发布时间：2025-10-21 18:05

发布者：网络

浏览次数：

使用CSS动画替代废弃的marquee标签可实现更高效、兼容性强的滚动文本效果。通过transform与@keyframes结合overflow:hidden控制容器，能创建水平、垂直及无缝循环的滚动动画。水平滚动利用padding-left或双文本复制实现平滑衔接，垂直滚动则通过translateY在固定高度容器内轮播内容。配合animation属性调节速度与方向，提升性能与视觉体验，符合现代Web标准且易于维护扩展。

怎么在html中插入滚动文本_html marquee替代方案css动画实现

HTML中的<marquee></marquee>标签虽然能实现文字滚动效果，但早已被现代标准废弃，不推荐在实际项目中使用。更好的方式是采用CSS动画来创建兼容性强、样式可控的滚动文本效果。下面介绍几种基于CSS的替代方案。

使用CSS动画实现水平滚动文本

通过transform和@keyframes可以轻松实现从右向左滚动的文字效果，适用于新闻条、通知栏等场景。

基本结构如下：

<div class="marquee-container">
  <div class="marquee-text">
    这是一段会滚动显示的文本内容，持续循环播放。
  </div>
</div>

CSS样式设置：

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
<p>.marquee-text {
display: inline-block;
padding-left: 100%; /<em> 初始位置在容器外右侧 </em>/
animation: marquee-scroll 10s linear infinite;
}</p><p>@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}</p>

说明：文本从右向左滑入并完全移出左侧后循环。可通过调整animation-duration控制速度。

无缝循环滚动（首尾衔接）

如果希望滚动过程更平滑、无跳闪，可复制一次内容，让动画结束时下一个内容刚好接上。

HTML结构：

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 MarsCode

<div class="marquee-continuous">
  <div class="marquee-content">
    滚动文本示例    
    滚动文本示例    
  </div>
</div>

CSS实现：

.marquee-continuous {
  overflow: hidden;
  width: 100%;
}
<p>.marquee-content {
display: inline-block;
white-space: nowrap;
animation: scroll-left 8s linear infinite;
}</p><p>@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /<em> 移动一半宽度，实现无缝衔接 </em>/
}
}</p>

注意：两个重复文本总宽应为容器两倍，动画移动-50%即可完成一次平滑过渡。

垂直滚动文本（上下滚动）

类似新闻ticker或公告栏，可用垂直方向的transform实现。

.marquee-vertical {
  height: 50px;
  overflow: hidden;
  position: relative;
}
<p>.marquee-vertical-item {
position: absolute;
white-space: nowrap;
animation: slide-up 6s linear infinite;
}</p><p>@keyframes slide-up {
0% {
transform: translateY(50px);
}
100% {
transform: translateY(-50px);
}
}</p>

此方法适合少量条目轮播，若需多条消息切换，建议配合J*aScript控制。

总结

用CSS动画替代<marquee></marquee>不仅符合现代Web标准，还能灵活控制动画速度、方向和行为。关键点包括：使用overflow: hidden隐藏溢出内容，transform提升性能，@keyframes定义动画路径。基本上就这些，不复杂但容易忽略细节。合理运用能让滚动文本既美观又高效。

以上就是怎么在HTML中插入滚动文本_HTML marquee替代方案CSS动画实现的详细内容，更多请关注其它相关文章！

# html # css # javascript # java # ai # css动画 # css样式 # web标准 # overflow # 显示效果 # 这是 # 还能 # 适用于 # 相关文章 # 中文网 # 能让 # 几种 # 解决问题 # 可通过 # 狮山网站优化推荐 # 遵义抖音seo最精准 # 临床医学搜索关键词排名 # 小米营销推广视频教程大全 # 沈阳网站建设服务热线 # seo标题有什么用 # 微山全网seo推广招聘 # 复制文章做seo # seo 怎么发布外链 # 网络营销推广负责人