一、交互状态动效（用户操作触发，全站必备）
用户鼠标 / 手指操作产生反馈，优先级最高、使用率 100%
- Hover 悬浮：按钮、卡片、导航、图片悬停变色 / 缩放 / 阴影
- Active 点击：按钮按下收缩、水波纹、颜色加深
- Focus 聚焦：输入框边框变色、光标辅助动效
- 开关 / 复选：勾选切换过渡、表单报错抖动
常用参数：
0.2~0.3s ease，缩放≤1.05 倍
二、转场切换动效（区块 / 页面切换）
解决页面生硬跳转，多用于弹窗、选项卡、单页切换
- 弹窗动效：弹出缩放、底部上滑、侧边抽屉划入、蒙版渐显
- Tab 选项卡：下划线跟随、内容淡入切换
- 页面转场：淡入淡出、左右滑入（SPA 单页站）
三、滚动触发动效（落地页 / 企业站最常用）
页面滚动到可视区自动播放，提升页面层次感
- 元素入场：渐显、从上 / 下 / 左右滑入、上浮渐现（AOS 常用）
- 导航滚动：滚动置顶、导航透明度渐变、返回顶部显隐
- 视差 Parallax：背景慢速滚动、多层错位移动（banner 大图）
- 滚动渐隐：模块滑出屏幕缓慢透明消失
四、加载占位动效（等待状态优化体验）
- 页面顶部进度条、骨架屏 loading
- 图片懒加载渐显、模块加载转圈动画
五、数据展示动效（企业实力、数据板块专用）
- 数字滚动动画：从 0 累加至目标数值
- 进度条 / 环形填充、柱状图表渐现动画
规则：仅首次进入视图播放一次，不循环
六、装饰循环动效（点缀用，严控数量，少用）
纯美化、无交互，少量点缀页面
- 图标缓慢上下浮动、logo 微光扫边
- 背景缓慢流光、粒子漂浮
限制：浮动位移 3~8px，周期 2s 以上，正文区域禁用
补充：按技术实现分类（开发选型）
- CSS 动画：transition 过渡、@keyframes 关键帧（hover、入场首选，性能最优）
- JS 原生动画：滚动监听、数字计数、复杂时序
- 第三方库：AOS (滚动入场)、GSAP (复杂动画)、Lottie (矢量图标动效)
如果您有网站建设、网站改版、手机网站建设、域名注册、主机空间等方面的需求… 请添加凯铧互联小编客服微信或拨打咨询热线： 159-1069-3561（微信同步），我们会详细为你一一解答你心中的疑难
