呀嘿嘿，CSS 动画

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛 刚刚用 CSS 画了只兔子，趁热写下这篇文章作为记录。 结构设计 提到作画，手写也是进行结构的拆分，我们可以将兔子拆分为以下几个

事情是这样的：之前写的像素转换器，其实我一直想给他加上像素动画，但是却屡战屡败，今天终于解决了这个问题，这里记录一下。

之前在时间函数那篇文章里有写到 css 动画除了支持贝塞尔曲线绘制平滑动画外，还支持使用 steps 来绘制定格/逐帧动画，但是一直没想到使用场景，知道前两天在网上看到一篇说合金弹头的帖子，突然想起来

CSS 动画其实并不难，本文主要讲解渐变动画的形成要素、使用技巧、注意事项，讲解掘金主页头像彩蛋等，剖析 CSS 渐变动画。 走过路过不要错过🐶🚀

上篇讲完了渐变动画，本篇我们讲一下 animation 动画，animation 动画相比渐变动画来讲功能更丰富，使用也更复杂，不过其中相通之处也很多，建议看完上篇再来看本篇可以更方便吸收。 常见使用

时间函数在 CSS 动画中至关重要，它会直接影响到动画的展现效果，然而由于相对其它属性而言较为复杂，可能了解的人较少，今天详细讲一讲时间函数。

最近翻 `MDN` 突然发现一套叫 `Web Animations API` 的东东，点进去看才知道，原来是一套控制 `css animation` 的 `API`，而且已经有段时间了 🤦‍♂️

最近在看 `next.js` 官网是被引流到 `conf` 页面，发现上面有一个炫酷的按钮，按钮的边框色彩不断变动给人感觉是光在随着按钮旋转一般，感觉挺酷的，复刻一下讲解下原理。

前排先放效果图，通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。