【效果】html5给小树浇水,然后树长大的效果

用到的知识点

css3  animation 和 keyframes

事件: webkitAnimationEnd  替代setTimeout     webkitAnimationEnd 事件讲解http://blog.csdn.net/kongjiea/article/details/38614695

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<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>


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值