打……打……打飞机

先不多说,来一张图。

其次需要注意的一个点是,这里的东西用的是 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 也有所不同。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180111G0K86I00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券