HTML5模拟给树浇水长大

来源：互联网发布：wifi如何绑定mac地址编辑：程序博客网时间：2024/05/01 20:02
用到的知识点
CSS3 animation 和 keyframes
事件： webkitAnimationEnd 替代setTimeout webkitAnimationEnd 事件讲解http://blog.csdn.NET/kongjiea/article/details/38614695
[html] view plain copy
 print?
<!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> 
0 0