js仿照 蚂蚁森林 效果

如图js仿照 蚂蚁森林 效果上图所示

相关css：

**

葫芦籽动画效果

*/

/* animation */

.a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}

.bottle-fadeIn1{-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-fadeIn1{-webkit-animation-name:bottleFadeIn1;-moz-animation-name:bottleFadeIn1;-ms-animation-name:bottleFadeIn1;animation-name:bottleFadeIn1;}

.a-watering{-webkit-animation-name:watering;-moz-animation-name:watering;-ms-animation-name:watering;animation-name:watering;}



/*水瓶动画*/

@-webkit-keyframes bottleFadeIn1{

from {top:8px;}

to {top:280px;left:180px}

}

/*上下浮动*/

.bottle-fade1{-webkit-animation: 2s infinite;-moz-animation:2s infinite;-ms-animation:2s infinite;animation:2s infinite;}

.bottle-fade1{-webkit-animation-name:bottleFade1;-moz-animation-name:bottleFade1;-ms-animation-name:bottleFade1;animation-name:bottleFade1;}

/*水瓶动画*/

@-webkit-keyframes bottleFade1{

from{transform:translate(0,10px)}

to{transform:translate(0,18px)}

}
.bottle-fadeIn2{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}

.bottle-fadeIn2{-webkit-animation-name:bottleFadeIn2;-moz-animation-name:bottleFadeIn2;-ms-animation-name:bottleFadeIn2;animation-name:bottleFadeIn2;}

/*水瓶动画*/

@-webkit-keyframes bottleFadeIn2{

from {top:80px;left:10px;}

to {top:280px;left:180px}

}



.bottle-fadeIn3{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}

.bottle-fadeIn3{-webkit-animation-name:bottleFadeIn3;-moz-animation-name:bottleFadeIn3;-ms-animation-name:bottleFadeIn3;animation-name:bottleFadeIn3;}

/*水瓶动画*/

@-webkit-keyframes bottleFadeIn3{

from {top:120px;}

to {top:280px;left:180px}

}

.bottle-fadeIn4{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}

.bottle-fadeIn4{-webkit-animation-name:bottleFadeIn4;-moz-animation-name:bottleFadeIn4;-ms-animation-name:bottleFadeIn4;animation-name:bottleFadeIn4;}

/*水瓶动画*/

@-webkit-keyframes bottleFadeIn4{

from {top:30px;}

to {top:300px;left:180px}

}

.bottle-fadeIn5{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}

.bottle-fadeIn5{-webkit-animation-name:bottleFadeIn5;-moz-animation-name:bottleFadeIn5;-ms-animation-name:bottleFadeIn5;animation-name:bottleFadeIn5;}

/*水瓶动画*/

@-webkit-keyframes bottleFadeIn5{

from {top:120px;left:250px}

to {top:280px;left:180px}

}

/*流水动画*/

@-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);}

}

js

$scope.isshow=false;

            var test = angular.element(document.getElementById(id));

            var shu = angular.element(document.getElementById('shu'));

            test.removeClass('bottle-fade1');

            test.addClass('bottle-fadeIn'+type);

            window.addEventListener('webkitAnimationEnd', function (e) {

                test.removeClass('bottle-fadeIn'+type);

                test.addClass('a-watering');

            });

            window.addEventListener('webkitAnimationEnd', function (e) {

                test.removeClass('a-watering');

                shu.addClass('a-swing');

                $scope.isshow=true;

                shu.css({'-webkit-transform':'scale(1.2,1.2)'});

            });

            window.addEventListener('webkitAnimationEnd', function (e) {

                shu.removeClass('a-swing');

            });

相关html

<div ng-repeat="qplist in qplist2">

                <div class="huluBo bottle-fade1" style="{{qplist.style}}" id="bottle{{$index+1}}" ng-click="qpclick('bottle{{$index+1}}',{{$index+1}},qplist.missionid)">

                    <div class="circleB">{{qplist.score}}</div>

                    <div class="text">{{qplist.name}}</div>

                </div>

<!--bottle-fade1 气泡上下浮动 css

树的html-->

<div class="cuteTMZ" id="shu" ng-class="{true: 'a-swing'}[isshow]">

              <img src="images/TMZ.png">

          </div>

            </div>

参考链接

CSS @keyframes 规则

示例代码如图

js仿照蚂蚁森林效果_js蚂蚁森林种树,js蚂蚁森林-Web开发文档类资源-CSDN下载