什么是 JS 特效
JS 特效指用 JavaScript 驱动的交互动画：轮播自动播放、点击弹出模态框、滚动触发渐入、导航吸顶高亮。与 CSS 特效的分工是：CSS 管“状态切换的平滑过渡”，JS 管“逻辑、时机与动态内容”。
一个页面 80% 的简单动效应该交给 CSS（性能好、代码少）；JS 负责剩下的：需要计算、监听滚动、动态加载数据、响应用户手势的交互。三者配合：结构 HTML、样式 CSS、逻辑 JS。
- JS 特效三步走：拿 DOM → 绑事件 → 改样式/类
- 动画首选 requestAnimationFrame，弃用 setInterval
- 复杂滚动交互用 IntersectionObserver，别死监听 scroll
HTML
<style> #jdemo { width: 120px; height: 120px; margin: 30px auto; border-radius: 14px; background: #d2a8ff; cursor: pointer; transition: transform .3s ease; } </style> <div id="jdemo"></div> <p style="text-align:center;color:#888">点击方块：JS 加类，CSS 做过渡</p> <script> var box = document.getElementById('jdemo'); box.addEventListener('click', function () { box.classList.toggle('spin'); }); </script> <style> #jdemo.spin { transform: rotate(180deg) scale(.85); border-radius: 50%; } </style>
本节要点JS 管逻辑与时机，CSS 管平滑过渡；特效三步：拿 DOM、绑事件、改类。
