html4的marquee标签被html5删了吗_滚动文字怎么做【技巧】

发布时间 - 2026-01-04 00:00:00    点击率:
标签在HTML5中已被废弃,推荐用CSS animation+transform实现无缝滚动,兼顾可访问性、性能及交互控制,并适配prefers-reduced-motion与移动端优化。

marquee 标签在 HTML5 中确实被废弃了

是的, 标签在 HTML5 规范中**不被支持**,既不是有效元素,也不在任何现代标准中保留。浏览器虽大多仍能渲染(出于兼容性),但 W3C 明确将其列为“非标准、不推荐使用”。用它会导致 HTML 验证失败,且无法通过无障碍检测(如 screen reader 通常忽略或误读)。

CSS animation 实现滚动文字最稳妥

替代 的主流方案是用 animation + transform,控制 translateXtranslateY。关键点在于:动画需无缝循环、避免跳帧、适配不同长度文本。

  • @keyframes 定义从 100%-100% 的位移(不是 0%100%),否则会闪回
  • 容器设 overflow: hidden,子元素设 white-space: nowrap 防止换行
  • 动画时长根据内容长度动态调整更自然;固定时长下,文本越长,视觉速度越慢
  • will-change: transform 可提升滚动流畅度(尤其低端设备)
@keyframes scroll-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.scrolling-text {
  overflow: hidden;
  white-space: nowrap;
}
.scrolling-text span {
  display: inline-block;
  animation: scroll-left 15s linear infinite;
  will-change: transform;
}

JavaScript 滚动更适合动态/交互场景

当需要暂停/加速/反向/按按钮控制,或文本内容频繁更新时,CSS 方案受限(需重写 keyframes 或 JS 操作 style)。此时用 requestAnimationFrame 手动驱动位移更灵活。

  • 避免用 setInterval,易因帧率波动导致卡顿
  • 位移量应基于时间差(deltaTime)计算,而非固定步长,保证跨设备速度一致
  • 暂停时记得调用 cancelAnimationFrame,防止内存泄漏
  • 若文本过短,需拼接两份内容(textContent + textContent)才能实现无缝

别忽略可访问性和性能细节

滚动文字本质是运动干扰项,对部分用户(如眩晕症、注意力障碍)不友好。WCAG 要求提供暂停/停止机制。同时,持续动画会触发浏览器每帧重绘,若页面存在多个滚动区域,可能明显拖慢低端设备。

立即学习“前端免费学习笔记(深入)”;

  • 务必加 prefers-reduced-motion 媒体查询降级:@media (prefers-reduced-motion: reduce) { animation: none; }
  • 移动端慎用——iOS Safari 对 transform 滚动优化较差,长文本易掉帧
  • 如果只是“通知类”短文案(如“促销进行中”),用 CSS transition + hover 触发比自动滚动更克制

真正难的不是让字动起来,而是让它动得合理、可控、不伤人。很多项目卡在“怎么让停按钮生效”或者“为什么 iOS 上一卡一卡”,问题往往出在动画策略没和交互逻辑对齐。


# css  # javascript  # java  # html  # js  # html5  # 浏览器  # safari  # ios  # 重绘  # overflow 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 昵图网官网入口 昵图网素材平台官方入口  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  教你用AI将一段旋律扩展成一首完整的曲子  如何快速打造个性化非模板自助建站?  如何快速生成凡客建站的专业级图册?  如何用PHP工具快速搭建高效网站?  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  logo在线制作免费网站在线制作好吗,DW网页制作时,如何在网页标题前加上logo?  linux写shell需要注意的问题(必看)  如何用狗爹虚拟主机快速搭建网站?  动图在线制作网站有哪些,滑动动图图集怎么做?  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  如何在万网自助建站平台快速创建网站?  北京的网站制作公司有哪些,哪个视频网站最好?  手机软键盘弹出时影响布局的解决方法  如何在搬瓦工VPS快速搭建网站?  如何快速生成橙子建站落地页链接?  海南网站制作公司有哪些,海口网是哪家的?  移动端手机网站制作软件,掌上时代,移动端网站的谷歌SEO该如何做?  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  利用 Google AI 进行 YouTube 视频 SEO 描述优化  如何快速登录WAP自助建站平台?  Laravel如何实现用户密码重置功能?(完整流程代码)  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  LinuxCD持续部署教程_自动发布与回滚机制  Laravel集合Collection怎么用_Laravel集合常用函数详解  Python结构化数据采集_字段抽取解析【教程】  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  实现点击下箭头变上箭头来回切换的两种方法【推荐】  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  js实现点击每个li节点,都弹出其文本值及修改  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  再谈Python中的字符串与字符编码(推荐)  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界?  Java Adapter 适配器模式(类适配器,对象适配器)优缺点对比  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  Android自定义控件实现温度旋转按钮效果  Firefox Developer Edition开发者版本入口  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  MySQL查询结果复制到新表的方法(更新、插入)  香港服务器建站指南:外贸独立站搭建与跨境电商配置流程  如何快速生成ASP一键建站模板并优化安全性?