css3动画案例：实现漂浮的气球

案例链接： raz分级阅读app，raz离线版，raz安卓版苹果版

一、定义每一个气球的样式

1、气球往上飘的样式

.qiqiu-animate .qiqiu1{

bottom:-200px; left:0;animation: myfirst 20s linear 1; animation-delay:0s;

}

2、气球左右摇摆的样式

.qiqiu0 img{

transform: rotate(0);

transform-origin: bottom;animation: shake 3s linear infinite; animation-delay:0s;

}

二、定义气球往上飘的动画

@keyframes myfirst

{

from {bottom: -200px;}

to {bottom: 2000px;}

}

三、定义气球左右摇摆的动画

@keyframes shake

{

0% {transform: rotate(-10deg);}

20% {transform: rotate(-8deg);}

40% {transform: rotate(2deg);}

60% {transform: rotate(10deg);}

80% {transform: rotate(0deg);}

100% {transform: rotate(-10deg);}

}

四、点击摇摆气球的js逻辑

jQuery(document).ready(function(){ if(isHome){
jQuery('.qiqiu-group').addClass('qiqiu-animate')
}
jQuery(".qiqiu0").on("click", function(){
jQuery('.qiqiu-group').removeClass('qiqiu-animate') setTimeout(function(){
jQuery('.qiqiu-group').addClass('qiqiu-animate')
},200)
});
});