android掉金币动画,写一个H5签到金币掉落动画

效果gif

最近项目上写了一个签到页面,其中有一个功能设计的是点击签到，有一个金币坠落的效果，现在总结记录一下：

需求

中间已签到的金色圆球需要倾斜掉落，然轻微反弹后竖直显示。

四周的小金币不能同时掉落在屏幕上，需要有先后次序。

当小金币和金色圆球完全出现在屏幕后需等待500毫秒。

金色圆球逐渐放大并变淡。

小金币此时竖直下落，速度逐渐加快。

实现步骤

如果要实现此效果，至少需要两组动画衔接在一起。

第一组动画是金币掉落，金色圆球倾斜反弹出现在页面上；第二组是金色圆球逐渐放大并变淡金币，金币加速掉落。

具体代码

第1步：HTML布局

第2步：CSS布局代码

确定小金币和金色大圆球掉落的最终位置

.signin{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;overflow:hidden}

.coin{width:4.12rem;height:4.12rem;font-size:30px;margin-left:calc((100% - 4.12rem) / 2);margin-top:calc((9.22rem / 2) - 1.5rem);position:relative}

.coin .bg{float:left;width:4.12rem;height:4.12rem}

.coin .texts{position:absolute;top:1.7rem;left:1.11rem;width:1.9rem;height:.72rem}

.coin1{width:.68rem;height:.5rem;position:absolute;top:.3rem;right:0;animation-delay:0.3s}

.coin2{width:.33rem;height:.43rem;position:absolute;top:.5rem;left:3.7rem;animation-delay:0.25s}

.coin3{width:.67rem;height:.8rem;position:absolute;top:3.3rem;left:.9rem;animation-delay:0.2s}

.coin4{width:.75rem;height:.55rem;position:absolute;top:3.7rem;right:1.3rem;animation-delay:0.15s}

.coin5{width:.83rem;height:.59rem