用到的知识点
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>