动画：让按钮像猫咪一样会摇尾巴

【总览】

1. 老板让网页“穿件衣服”——CSS 到底是啥？
2. 选择器：在 HTML 里精准点外卖
3. 颜色与字体：如何让你的网站看起来像“设计师”而不是“设计师他弟”
4. 盒子模型：万物皆盒子，除了你老板画的大饼
5. 定位与布局：把 div 当乐高，拼出九宫格还是巴黎铁塔随你
6. 动画：让按钮像猫咪一样会摇尾巴
7. 祖传小妙招：三行代码拯救祖传乱码页

阅读提示：800 字左右，蹲坑刷微博时间刚好；学不会你来打我，我蹲完先冲水。

一、先上效果，骗你往下看

结论：动效 = 把页面从“PPT”升级成“迪士尼”，点击率高了，老板嗓门低了。

二、两种武器：transition vs. animation

口诀：
“小动静用 transition，大场面用 animation。”

三、transition 三板斧

.btn {
  background: #1e293b;
  color: #fff;
  transform: scale(1);
  transition: all .3s ease;
}
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

解释：

• transform: scale(1.05) → 放大 5%，像按钮深吸一口气；
• box-shadow 同步加长，影子也跟着“踮脚”，立体感十足；
• 离开 hover 自动倒带，无缝还原，一行 JS 都不用写。

四、animation 让图标“自己嗨”

需求：刷新页面时，小火箭“嗖”地往上冲，暗示“正在加载”。

.rocket {
  display: inline-block;
  animation: fly 1.2s ease-in-out infinite;
}

@keyframes fly {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

• infinite → 无限循环，用户不看够不让停；
• ease-in-out → 先慢后快再慢，像猫咪伸懒腰，自然不突兀。

五、实战：按钮“摇尾巴”求点击

HTML：

<button class="shake">立即领取</button>

CSS：

.shake {
  animation: tail 3s ease-in-out infinite;
  transform-origin: 90% 50%; /* 尾巴根在右沿 */
}

@keyframes tail {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(3deg); }
  20%, 40% { transform: rotate(-3deg); }
}

• transform-origin 把旋转轴挪到右侧 → 像猫尾巴根连屁股；
• 左右 3° 摆动，频率低，不吵眼，但足够勾引点击。

六、性能红线：哪些属性能加速？

浏览器把动画分成“硬件加速”与“CPU 硬算”两类：

口诀：
“只动 transform & opacity，妈妈再也不担心我掉帧。”

七、 prefers-reduced-motion：尊重“晕动用户”

有人看动画会头晕（前庭功能障碍），系统可以开“减少动态效果”。

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

一行代码，直接全局静音，苹果官网也这么干，逼格与温度并存。

八、祖传小妙招：三行代码拯救祖传乱码页

1. 加载蒙层淡出

.skeleton {
  animation: fadeOut .6s forwards;
}
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

forwards → 停在最后一帧，蒙层消失后不占点击。

2. 心跳加分红

.heart {
  animation: beat .8s infinite;
}
@keyframes beat {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.15); }
}

3. 数字自增（偷懒版）

<span class="num" data-target="1234">0</span>

const n = document.querySelector('.num');
let t = 0;
const timer = setInterval(()=>{
  t += Math.ceil(n.dataset.target/40);
  if(t >= n.dataset.target){t=n.dataset.target;clearInterval(timer);}
  n.textContent = t;
},20);

不用框架，0 依赖，老板问起来就说“纯原生，性能贼高”。

九、课后作业：做一个“呼吸灯”输入框

需求：

• 聚焦时边框颜色由浅到深再回浅，1.5s 循环；
• 仅使用 transform / opacity / border-color 保证性能；
• 颜色变量：#e5e7eb → #6366f1 → #e5e7eb。

提示：

input {
  border: 2px solid #e5e7eb;
  transition: border-color 1.5s ease-in-out;
}
input:focus {
  animation: breathe 1.5s ease-in-out infinite;
}
@keyframes breathe {
  50% { border-color: #6366f1; }
}

CodePen 或截图甩评论区，最丝滑作品送“呼吸灯”键盘灯优惠券（电子版，自己 P）。

十、下集预告

动画会摇了，但老板又又又提需求：
“深色模式呢？用户半夜刷网页亮瞎眼！”
下一篇《祖传小妙招：三行代码拯救祖传乱码页 + 深色模式自动切换》，
教你 prefers-color-scheme + CSS 变量，白天奶白，夜晚暗黑，一杯咖啡的时间搞定。
别走开，系列文持续更新，关注等更！

（完）