HTML本身不支持特效，所谓“HTML特效”实为CSS动画与JavaScript交互实现；和是已被废弃20年的HTML 3.2标签，现代浏览器默认忽略，需用CSS或JS替代。
HTML 本身不做特效，所谓“html特效”其实是用 CSS 动画 + JavaScript 交互实现的；直接写 标签或纯 HTML 结构，连一个淡入都出不来。
为什么 <marquee></marquee> 和 <font></font> 现在全失效了
老教程里一堆 <marquee></marquee> 滚动字、<font color="red"></font> 改颜色，现在 Chrome/Firefox/Edge 全当不存在——这些是已被废弃 20 年的 HTML 3.2 标签，现代浏览器默认忽略或仅作兼容性兜底，不渲染视觉效果。
- 不是“没开开关”，是规范里直接删了，
<marquee></marquee>连 MDN 文档都不收 - 想复现滚动效果？必须用
@keyframes+animation，或 JS 控制transform: translateX() -
<font></font>同理，样式必须走 CSS：用style="color: red;"或外链.text-red { color: red; }
CSS transition 和 animation 到底该选哪个
两者都能动，但触发逻辑和控制粒度差很远——选错会导致“点一下没反应”或“停不下来”。
-
transition只响应属性变化（比如hover时改opacity），适合简单状态切换；必须配property+duration，漏写transition-property就不动 -
animation是预设关键帧，独立运行，适合循环、多段运动（如弹跳、加载旋转）；必须定义@keyframes名称，并在元素上用animation-name绑定 - 常见坑：
transition对display: none block无效（因为 display 不支持过渡），得换用opacity+visibility
JS 控制动画时，setTimeout 和 requestAnimationFrame 别混用
用 setTimeout 做轮播图或数字滚动，容易卡顿、掉帧，尤其在后台标签页或低性能设备上。
立即学习“前端免费学习笔记（深入）”；
-
requestAnimationFrame浏览器自动对齐刷新率（通常是 60fps），且页面不可见时会暂停，省电又顺滑 -
setTimeout(fn, 16)是硬凑 60fps，但实际执行时机受 JS 主线程阻塞影响，延迟可能达 50ms+ - 真实场景：做实时进度条、跟随鼠标移动的浮层，必须用
requestAnimationFrame；简单延时跳转（如 3 秒后跳首页）才用setTimeout
真正卡住人的从来不是“怎么加个动效”，而是没分清 CSS 能力边界、JS 执行时机、以及浏览器渲染流水线怎么协作。一个 will-change: transform 没加，或者 transform 写成 top/left，硬件加速就失效——这些细节不查 DevTools 的 Rendering 面板，光看代码根本发现不了。
