《千灯展卷》一帖本在正月十五发布，当天没空错过了，后来不想再发出来，昨天空闲时翻来看看，觉得还是可以发的。下面谈谈动画部分的制作。

当时根据预设主题，相中如下这张图片：

根据上面图片特点，我想设计一组五角星，按照图中的五角星的方向自左向右飞行。最快捷的路径设计是使用 offset-path，用三次贝塞尔曲线实现路径。这里以在 740*400 为例，路径从（0,200）起步，到（740,200）终止，控制点在（370,-180），路径效果示意如下：

路径偏上了，没关系，使用该路径的元素是绝对定位，它们会以路径为导向，但可以偏移路径。现在，来写一个五角星元素，试着把它放到路径看看。先看代码：

效果：

借助 offset-distance，新加入的五角星现在在弧线路径的最左端，需要将其往下放，设置好top值就可以。绝对定位的元素left和top值均为0，现在把 top 值改为100看看：

点我改五角星top值为100px

没问题吧？最后的工作是用JS随机生成五角星，让它们在一定的top值区间布排，随机设置其大小以及运行关键帧动画的提前时间等等。以下完整示例，考虑到五角星的宽度占位，路径终点略作改动。看看代码和效果：

说明：① 演示2和3的绿色路径是使用了svg画出来的，演示4已经去掉了svg，所以看不到路径；② 五角星溢出帖子没有做处理是为了演示五角星运行的完整过程，实际应用时可根据需要设置#papa选择器的overflow 属性 为 hidden；③ 和帖子《千灯展卷》相比，这里的五角星没有旋转，若需要旋转，可以修改@keyframes动画，帖子中是给 li-zi 选择器添加另外加一个关键帧动画。