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

来源：互联网发布：goagent 3.2.3 源码编辑：程序博客网时间：2024/05/01 18:56
用到的知识点
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>
0 0