打……打……打飞机

先不多说，来一张图。

其次需要注意的一个点是，这里的东西用的是 emoji，所以，如果设备上没有相对应的 emoji，那么就看不到效果了，不信，试试。

http://lab.tianyizone.com/demo/emoji_animation.html

用的 emoji 分别是：、、

期间使用了 和 这两个属性，然后结合一点动画的时间差来处理。

HTML 结构很简单，就是利用 input 的 属性，结合 CSS 中的 来影响后续的相邻元素样式。

直升机平飞部分的样式，无限循环前进。

爆炸部分的样式，控制好位置，然后设置透明度为0，先不可见，后续等 input 被 checked 之后再显示出来。

枪，嗯，打飞机要用到枪，刚好有一个手枪的 emoji 图标，直接用上。改变 input 的样式，全屏，不可见，定位层叠拉高，整个页面都可以点击。

点击后，改变直升机的运动轨迹，并旋转，机头朝下，坠落……

控制好两个元素之间的动画时间，使用 的时间，等直升机坠落的位置差不多的时候开始显示爆炸的 emoji，形成一个炸开的效果。

嗯，差不多就是这样，一个简单的打飞机效果就有了。没用到图片，也没用 CSS 去画很多东西图案，只是利用了 emoji 来做效果。顺便图好玩，把 className 也换成了 emoji。

所以，别问兼容性怎么样，这个只是为了好玩而已。在 windows 上你可能都看不到东西，Android 手机看到的可能还有点不同，甚至低版本的 iOS 手机看到的 emoji 也有所不同。