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>

石家庄市内五区植树活动为3月11日至17日，每个区安排1天植树活动。具体时间是：3月11日上午10：00，在小壁林区组织春季全民义务植树活动启动仪式，新华区组织1000人、市园林局系统和市内五区园林局领导参加，计划植树2万株；3月12日至13日，组织社会团体义务植树；3月14日，桥西区发动组织2000人，计划植树3万株；3月15日，桥东区发动组织1000人，计划植树2万株；3月16日，长安区发动组织2000人，计划植树3万株；3月17日，裕华区发动组织2000人，计划植树3万株。剩余树木由小壁林区组织社会群众和专业人员进行栽植。

3月4日，石家庄市园林局公布义务植树的报名方式。欲参加义务植树的社会团体和市民，可根据自己居住地到辖区园林部门或小壁林区管理处报名。

长安区园林局：85811381；桥东区园林局：87783610；裕华区园林局:86578992；新华区园林局: 85299600；桥西区园林局：83817318；小壁林区管理处：82209596。

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

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

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

发表评论

评论列表（0条）