使用方法:
1、head引入css文件
<link type="text/css" href="css/style.css" rel="stylesheet" />
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
3、body引入部分
<button class="order"><span class="default">点击下单</span><span class="success">完成订单
<svg viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span>
<div class="box"></div>
<div class="truck">
<div class="back"></div>
<div class="front">
<div class="window"></div>
</div>
<div class="light top"></div>
<div class="light bottom"></div>
</div>
<div class="lines"></div>
</button>
<script type="text/javascript">
$('.order').click(function(e) {
let button = $(this);
if(!button.hasClass('animate')) {
button.addClass('animate');
setTimeout(() => {
button.removeClass('animate');
}, 10000);
}
});
</script>