<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=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 easeanimation:1s ease}
.bottle-fadeIn{-webkit-animation:.8s ease-moz-animation:.8s ease-ms-animation:.8s easeanimation:.8s ease}
.a-watering{-webkit-animation:0.5s ease 0 3-moz-animation:0.5s ease 0 3-ms-animation:0.5s ease 0 3animation:0.5s ease 0 3}
/* 摇摆 */
.a-swing{-webkit-animation-name:swing-moz-animation-name:swing-ms-animation-name:swinganimation-name:swing}
.bottle-fadeIn{-webkit-animation-name:bottleFadeIn-moz-animation-name:bottleFadeIn-ms-animation-name:bottleFadeInanimation-name:bottleFadeIn}
.a-watering{-webkit-animation-name:watering-moz-animation-name:watering-ms-animation-name:wateringanimation-name:watering}
/*水瓶动画*/
@-webkit-keyframes bottleFadeIn{
0%{opacity:0top:80pxright:0-webkit-transform:rotate(0deg)}
100%{opacity:1top:180pxright:100px-webkit-transform:rotate(-45deg)}
}
/*流水动画*/
@-webkit-keyframes watering{
0%{opacity:0}
100%{opacity:1height: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:0padding:0list-style: none}
.box{width:500pxborder:1px solid #dddmargin:10px autooverflow:hiddenposition: relativepadding-bottom:30px}
.tree{width:208pxheight:300pxbackground:url(images/shu.png) no-repeat
margin:250px auto 0}
.bottle{position:absolutetop:180pxright:100pxwidth:90pxheight:65pxbackground:url(images/sashui.png) no-repeatdisplay:none-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)}
.rain_box{position:absoluteoverflow:hiddentop:220pxright:190px}
.rain_box .line{width:4pxfloat:leftposition:relative}
.rain_box .line li{margin-top:2pxheight:2pxwidth:2pxbackground:#999-webkit-border-radius:3px-moz-border-radius:3pxborder-radius:3pxopacity: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:absolutetop:80pxright:10pxheight:20pxwidth:50pxbackground:#f60border:nonecolor:#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>
好处如下：
树木能调节气候，保持生态平衡。树木通过光合作用，吸进二氧化碳，吐出氧气，使空气清洁，新鲜。一亩树林放出的氧气够65人呼吸。树能防风固沙，涵养水土，还能吸收各种粉尘，一亩树林一年可吸收各种粉尘20—60吨。
树林能减少噪音污染。40米宽的林带可减弱噪音10—15分贝。树木的分泌物能杀死细菌。空地每立方米空气中有3，4万个细菌，森林里只有3，4百个。
绿化祖国，是我们国家的一项基本国策。其主要内容就是大力开展植树造林运动，用绿色植被把我们的国土覆盖起来。 植树造林的意义可大了。
植树造林可使水土得到保持，哪里植被覆盖率低，哪里每逢雨季就会有大量泥沙流入河里，把田地毁坏，把河床填高，把入海口淤塞，危害极大。要抑制水土流失，就必须植树造林，因为树木有像树冠那样庞大的根系，能像巨手一般牢牢抓住土壤。
而被抓住的土壤的水分，又被树根不断地吸收蓄存。具统计，一亩树林比无林地区多蓄水20吨呢。 其次，植树造林能防风固沙。风沙所到之处，田园会被埋葬，城市会变成废墟。要抵御风沙的袭击，必须造防护林，以减弱风的力量。风一旦遇上防护林，速度要减弱70% ~80%。
如果相隔一定的距离，并行排列许多林带，再种上草，这样风能刮起的沙砾也就减少了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）