html怎么写支付宝的种树效果_随笔

全部代码如下：

<!DOCTYPE>

<html>

<head>

<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>

$(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>

</ul>

</ul>

</ul>

</div>

</div>

</body>

</html>

红雀珊瑚

红雀珊瑚喜温暖，耐旱，生育适温23℃至30℃。受冻后，叶片会变白而脱落。它耐阴，栽培地点半阴有利于开花，且叶色较美观。它怕风吹，适合在干燥无风的环境下生长。栽培土宜选排水、通气良好的沙质壤土。每年或隔年翻盆一次，枝条过长时要短截或立支柱扶持。分枝少可酌情修剪枝条，促使多分侧枝。

生长期间要控制浇水量，一般要在土壤干燥后再浇水。施肥可用有机肥料或少量氮、磷、钾肥。冬季要减少肥水供给量。红雀珊瑚用扦插繁殖。在温室中全年可用扦插，但以温暖季节扦插为好。取茎梢或嫩茎，剪成10厘米长的茎段作插条。插条应先晾干，或将切口插入干灰、干土中，使浆汁被吸收，然后扦插。介质可用黄沙、珍珠岩或砻糠灰。插条生根后即可移栽入盆。

第一、光照：红雀珊瑚对光线要求不很严，在强光下叶色偏红，在半荫下偏绿。但不要在夏天让强烈阳光直射，在室内也不要放在太阴暗的地方。

第二、温度：红雀珊瑚喜温暖，在春夏秋三季一般的室温都适宜生长。而在冬季气温低于约13摄氏度时就可使叶片变成白色而脱落。第三、浇水：红雀珊瑚为肉质植物，耐旱能力较强，在生长季节每次要等到盆土一半干时再进行浇水。在冬季在盆土干时再少量浇水。浇水太多会引起霉病，更严重时茎基处腐烂。

第四、施肥：在生长期可每月向植株施一次复合肥。

第五、盆土：红雀珊瑚适宜用排水良好、疏松肥沃的沙质壤土。

1.浇水时间

生长季浇水应在上午10时前或下午4时后进行；冬季或早春应在午后气温较高时进行，以避免盆土温度的剧烈变化，影响植株的生长发育。

2.浇水量

浇水量应以从盆表到盆底上下全部湿润为准。对喜干旱的树种或需水量较少时期，应保持盆土微湿，当表面稍见干时再浇，但不能干透才浇。对喜湿的树种或需水量大的时期，应经常保持盆土的湿润，但不能积水。在干旱、高温季节，盆土表面水分散失较快，易形成盆内上部干旱、下部湿润的状态，如不及时补充水分，久而久之上部根系会死亡。如连续浇半截水（即没有浇透），盆内下部根系常处于干旱状态，会使下部根系死亡，影响植株生长发育。

由于各地气候条件及用盆情况差异较大，浇水没有一个特定的标准，要多方面灵活考虑。夏天需水量最大，晴天往往需每天浇2次水；春、秋季节一般每天浇1次水；冬季休眠期应控制浇水，根据越冬环境每10～15天检查一次，视盆土情况浇水，防止盆土过干而发生抽条现象。

3.喷水

春天干旱季节在浇水的同时应向叶面及地面适当喷水以提高空气湿度。由于阳台盆栽难以得到自然雨露，因此，人为进行叶面喷水显得十分重要，尤其是干旱季节和炎热的夏季，每天上、下午都要向枝叶上喷水，可降低树体温度，促进生长发育。此外，连日阴雨会使新生枝叶十分娇嫩，因此，久雨暴晴的夏日应及时喷水，以防止强日灼伤叶片。

4.对发生涝害及严重缺水植株的治疗

供水正常的植株，表现生长旺盛，叶色浓绿，叶柄向上支撑有力。缺水的植株，叶片软而无力，叶柄与叶片低垂，叶色暗并缺少光泽，严重时内卷甚至萎蔫。对严重缺水的植株，应放置阴凉处，先少量喷水，待恢复正常后再浇透水。浇水过量未经强光或高温影响而叶色发暗甚至萎蔫者，多为涝害。对发生涝害的植株，应从盆内整坨取出，置阴凉处使其迅速透气、散失水分，同时喷水保叶，待恢复后，再重新上盆养护。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/zaji/7316873.html

html怎么写支付宝的种树效果

发表评论

评论列表（0条）