先不多说,来一张图。
其次需要注意的一个点是,这里的东西用的是 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 也有所不同。
领取专属 10元无门槛券
私享最新 技术干货