简述

• 粗略构图，请发挥想象力哦，哈哈哈
• 触发点击事件时金币飞出，钱袋子摇晃
• 钱袋子里面的金币总量动态减少

思想

• 袋子内部动画就是上面波纹水平移动，金币总量垂直移动（transform:translateX||translateY)
• 钱袋子摇晃就是Z轴上偏移
• 金币飞出主要是用transition-origin

代码

html

<div id="container"><div class="top"></div><div class="box "><div class="progress"><image src="wave.png" class="wave"> </image><div class="moneyAll"></div></div></div><div class="take_money"><div class="coinreduce "><image src="coin.png" class="coin"> </image></div></div><button onclick="reduceHandler()">立即领取</button></div>

css

 #container{width: 400px;height: 400px;border:1px solid #ebebeb;margin:100px auto;}.box{position: relative;width: 180px;height: 150px;margin-top: 200px;margin-left: 100px;background: #aaa;overflow: hidden;border-bottom-right-radius: 50%;border-bottom-left-radius: 50%;border-top-right-radius: 42%;border-top-left-radius: 48%;}.progress{transition: all 1s;position: relative;transform: translateY(0%);}.wave{position: relative;left: -280px;top:6px;width:460px ;height:20px ;animation: moveRight 4s linear infinite;}@keyframes moveRight{0%{transform:none;}100%{transform: translateX(60%);}}.coin{width:28px ;height:28px ;}.moneyAll{width: 180px ;height:180px;background-image: linear-gradient(0deg, #ffe98f 0%, #ffce00 100%);}.haorooms{position: absolute;top: 0px;left: 0px;}.take_money{height: 40px;width: 40px;left: 178px;top: -180px;position: relative;z-index: -1;}.top{position: absolute;top: 270px;right: 318px;width: 50px;height: 50px;background: #ffce00;z-index: 0;}button{position: relative;top:-52px;left: 244px;background: transparent;width: 100px;height: 30px;margin:20px ;color: white;}.haorooms{animation: clockwise 1.5s linear 1;transform-origin: 160px 20px; }@keyframes clockwise{0%{transform: rotate(0deg);}100%{transform: rotate(103deg);}}.pool{animation: waggle 1.5s linear infinite;}@keyframes waggle{0%,7%{transform: rotateZ(0);}15%{transform: rotateZ(-15deg);}20%{transform: rotateZ(10deg);}25% {transform: rotateZ(-10deg);}30% {transform: rotateZ(6deg);}35% {transform: rotateZ(-4deg);}40%,100% {transform: rotateZ(0);}

JS

 var progressY = document.getElementsByClassName('progress')[0];var coinreduce = document.getElementsByClassName('coinreduce')[0];var box = document.getElementsByClassName('box')[0];var num=0;function reduceHandler(){num+=5;coinreduce.className+=" haorooms";box.classList+=" pool"progressY.style.transform="translateY("+num+"%)";console.log(coinreduce.className);var timer =  setTimeout(function(){coinreduce.className='coinreduce';box.className='box';},1500)setInterval(timer);        //清理定时器，防止内存泄露}

建议

• 金币数量的加减等逻辑可以写上
• 可以加上音乐