HTML本身不提供特效功能，所有动效须由CSS（transition/animations）或JavaScript（requestAnimationFrame等）实现；需避免display:none过渡、滥用will-change、误用marquee，并用DevTools定位渲染问题。
HTML 页面本身不提供“特效设置”这个功能，所有视觉动效都得靠 CSS 或 JavaScript 实现；直接写 标签或改 DOCTYPE 对动画、过渡、滚动效果完全没用。
怎么用 CSS 实现常见页面动效
CSS 是控制 HTML 元素外观和基础动效的主力，transition 和 animation 两个属性最常用，但行为差异大：
-
transition适合简单状态切换，比如按钮悬停变色、菜单展开——必须配合:hover、class切换等触发条件，不能独立运行 -
animation需要先用@keyframes定义帧序列，适合循环播放、复杂路径（如弹跳、路径移动），但默认不响应交互，得靠 JS 控制播放/暂停 - 别在
display: none的元素上设transition，它不会生效；改用opacity: 0+visibility: hidden组合才可过渡 - 移动端要注意
transform和opacity才能触发硬件加速，写left/top位移会掉帧
button {
background: #007bff;
transition: background 0.3s, transform 0.2s;
}
button:hover {
background: #0056b3;
transform: scale(1.05);
}
JavaScript 控制动效时容易卡死的几个点
JS 不是“加个 animate() 就动起来”，关键在时机控制和性能隔离：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 别用
setTimeout或setInterval做逐帧动画，优先用requestAnimationFrame，它和屏幕刷新率同步，不丢帧 - 频繁读取
offsetTop、getBoundingClientRect()会强制触发重排（reflow），把读操作集中到一帧开头，写操作集中到结尾 - 用
IntersectionObserver替代滚动监听做懒加载或视差效果，避免scroll事件高频触发导致卡顿 - 给元素加
will-change: transform能提前提示浏览器“这个要动”，但滥用会导致内存占用飙升，只在真正需要前一帧加
哪些“HTML 特效”其实是浏览器或编辑器的错觉
很多人以为某些效果是 HTML 自带的，实际是外部因素干扰：
立即学习“前端免费学习笔记（深入）”；
- 复制粘贴后文字带颜色/缩进？那是源内容含内联
style或富文本残留，文件本身没保存格式 - 本地双击打开页面有淡入？大概率是浏览器（如 Chrome）对本地文件的渲染策略或扩展注入了样式，换 Edge 或禁用插件就消失
- VS Code 里预览有动画？那是插件（如 “Live Server”）启用了自动刷新 + 默认注入了 CSS 动画库，不是 HTML 标准行为
-
<marquee></marquee>标签虽能滚动文字，但已废弃多年，无标准支持、无事件控制、移动端基本失效，别用
真要做出稳定可控的页面动效，得盯住三件事：CSS 层叠是否被意外覆盖、JS 动画帧是否被阻塞、目标元素是否处于可渲染状态。浏览器 DevTools 的 Rendering 面板（勾选 Paint flashing 和 FPS meter）比任何教程都更能暴露问题在哪。
