HTML5仿支付宝蚂蚁森林、QQ农场小树浇水长大效果

HTML5 herman 10096浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在2016年支付宝推出了蚂蚁森林,类似于QQ农场,不过蚂蚁森林主要是公益性项目。今天我们不讲偷菜攻略,将使用技术手段来解剖蚂蚁森林的浇水动画。

本文用到的知识点:HTML5CSS3,animation 和 keyframes。

动画效果

HTML5 CSS3 小树浇水

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>

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5仿支付宝蚂蚁森林、QQ农场小树浇水长大效果