在2016年支付宝推出了蚂蚁森林，类似于QQ农场，不过蚂蚁森林主要是公益性项目。今天我们不讲偷菜攻略，将使用技术手段来解剖蚂蚁森林的浇水动画。
本文用到的知识点：HTML5，CSS3，animation 和 keyframes。
动画效果
HTML5代码
全部代码如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>浇水</title>
<script src="http://zeptojs.com/zepto.min.js"></script>
<style>
/* animation */
.a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.bottle-fadeIn{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}
.a-watering{-webkit-animation:0.5s ease 0 3;-moz-animation:0.5s ease 0 3;-ms-animation:0.5s ease 0 3;animation:0.5s ease 0 3;}
/* 摇摆 */
.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}
.bottle-fadeIn{-webkit-animation-name:bottleFadeIn;-moz-animation-name:bottleFadeIn;-ms-animation-name:bottleFadeIn;animation-name:bottleFadeIn;}
.a-watering{-webkit-animation-name:watering;-moz-animation-name:watering;-ms-animation-name:watering;animation-name:watering;}
/*水瓶动画*/
@-webkit-keyframes bottleFadeIn{
0%{opacity:0;top:80px;right:0;-webkit-transform:rotate(0deg);}
100%{opacity:1;top:180px;right:100px;-webkit-transform:rotate(-45deg);}
}
/*流水动画*/
@-webkit-keyframes watering{
0%{opacity:0;}
100%{opacity:1;height:4px;}
}
/* 摇摆 */
@-webkit-keyframes swing{
/*10%{-webkit-transform:rotate(-5deg);}
20%{-webkit-transform:rotate(5deg);}
30%{-webkit-transform:rotate(-5deg);}
40%{-webkit-transform:rotate(5deg);}
50%{-webkit-transform:rotate(-5deg);}
60%{-webkit-transform:rotate(5deg);}
80%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(0);} */
/*0%{-webkit-transform:scale(1,1);}
20%{-webkit-transform:scale(1.1,1.1);}
40%{-webkit-transform:scale(1.2,1.2);}
60%{-webkit-transform:scale(1.1,1.1);}
80%{-webkit-transform:scale(1.2,1.2);}
100%{-webkit-transform:scale(1,1);} */
/*0%{-webkit-transform:scale(1,1);}
20%{-webkit-transform:scale(1.02,1.02);}
40%{-webkit-transform:scale(1.05,1.05);}
60%{-webkit-transform:scale(1.07,1.07);}
80%{-webkit-transform:scale(1.1,1.1);}
100%{-webkit-transform:scale(1.2,1.2);}*/
0%{-webkit-transform:scale(1,1);}
35%{-webkit-transform:scale(1.07,1.07);}
70%{-webkit-transform:scale(1.1,1.1);}
100%{-webkit-transform:scale(1.2,1.2);}
}
@-moz-keyframes swing{
20%{-moz-transform:rotate(15deg);}
40%{-moz-transform:rotate(-10deg);}
60%{-moz-transform:rotate(5deg);}
80%{-moz-transform:rotate(-5deg);}
100%{-moz-transform:rotate(0);}
}
@-ms-keyframes swing{
20%{-ms-transform:rotate(15deg);}
40%{-ms-transform:rotate(-10deg);}
60%{-ms-transform:rotate(5deg);}
80%{-ms-transform:rotate(-5deg);}
100%{-ms-transform:rotate(0);}
}
@keyframes swing{
20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0);}
}
</style>
<script>
$(function(){
$('#btn').click(function(){
$('.bottle').show().addClass('bottle-fadeIn');
$('.bottle').on('webkitAnimationEnd',function(){
$(this).removeClass('bottle-fadeIn');
$('.line li').addClass('a-watering');
});
$('.line li').on('webkitAnimationEnd',function(){
$('.bottle').hide();
$('.line li').removeClass('a-watering');
$('.tree').addClass('a-swing');
});
$('.tree').on('webkitAnimationEnd',function(){
$('.tree').css({'-webkit-transform':'scale(1.2,1.2)'});
$('.tree').removeClass('a-swing');
})
// setTimeout(function(){
// $('.line li').addClass('a-watering');
// },800);
// setTimeout(function(){
// $('.bottle').hide();
// $('.tree').addClass('a-swing');
// },2300);
// setTimeout(function(){
// $('.line li').removeClass('a-watering');
// $('.tree').removeClass('a-swing');
// $('.tree').css({'-webkit-transform':'scale(1.2,1.2)'});
// },3300);
});
})
</script>
<style>
*{margin:0;padding:0;list-style: none;}
.box{width:500px;border:1px solid #ddd;margin:10px auto;overflow:hidden;position: relative;padding-bottom:30px;}
.tree{width:208px;height:300px;background:url(images/shu.png) no-repeat;
margin:250px auto 0;}
.bottle{position:absolute;top:180px;right:100px;width:90px;height:65px;background:url(images/sashui.png) no-repeat;display:none; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
.rain_box{position:absolute;overflow:hidden;top:220px;right:190px;}
.rain_box .line{width:4px;float:left;position:relative;}
.rain_box .line li{margin-top:2px;height:2px;width:2px;background:#999;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;opacity:0;}
.rain_box .line1{-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);margin-left:15px;}
.rain_box .line2{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);margin-left:2px;}
.rain_box .line3{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg);margin-left:3px;}
#btn{position:absolute;top:80px;right:10px;height:20px;width:50px;background:#f60;border:none;color:#fff;}
</style>
</head>
<body>
<div class="box">
<!-- 树 -->
<div class="tree"></div>
<!-- /树 -->
<!-- 水瓶 -->
<div class="bottle" alt="a-watering"></div>
<!-- /水瓶 -->
<!-- 雨水 -->
<div class="rain_box">
<ul class="line line1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="line line2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="line line3">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- /雨水 -->
<input type="button" id="btn" value="浇水" />
</div>
</body>
</html>
： » HTML5仿支付宝蚂蚁森林、QQ农场小树浇水长大效果
原创文章，作者：kirin，如若转载，请注明出处：https://blog.ytso.com/251203.html