js仿照 蚂蚁森林 效果
2024-06-10 03:37:16
如图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="data:images/TMZ.png"></div></div>参考链接
CSS @keyframes 规则
示例代码如图
js仿照蚂蚁森林效果_js蚂蚁森林种树,js蚂蚁森林-Web开发文档类资源-CSDN下载
js仿照 蚂蚁森林 效果相关推荐
- 类似蚂蚁森林html5游戏源码,js仿照 蚂蚁森林 效果
如图js仿照 蚂蚁森林 效果 css ** 葫芦籽动画效果 */ /* animation */ .a-swing{-webkit-animation:1s ease;-moz-animation:1 ...
- 仿支付宝蚂蚁森林效果
CustomWaterView 项目地址:xiaohaibin/CustomWaterView 简介::star: 仿支付宝蚂蚁森林效果 更多:作者 提 Bug 标签: 实现原理文章:https ...
- 基于Auto.js的蚂蚁森林能量收集脚本
最近支付宝把"查看更多好友"和"没有更多了",这两个键改成图片格式了,不能识别文字,导致了无法正常的进入更多好友的界面及收集完无法正常退出. 更新内容(已修改下 ...
- 【黄啊码】安卓实现支付宝中的蚂蚁森林效果
最近公司产品突然有一个类似支付宝蚂蚁森林的功能,大致功能跟支付宝蚂蚁森林相像,在看了一下支付宝蚂蚁森林的效果之后,打算先撸一个控件出来,等公司效果图出来之后就可以放上去直接使用. 首先我们先大致看下支 ...
- 老司机带你顺手撸一个支付宝蚂蚁森林效果
老司机,不存在的,其实我还算不上,哈哈... 最近公司产品突然有一个类似支付宝蚂蚁森林的功能,大致功能跟支付宝蚂蚁森林相像,在看了一下支付宝蚂蚁森林的效果之后,本来这种东西用RN实现是最好不过的,不过 ...
- 用auto.js偷蚂蚁森林能量
(一)下载地址: auto.js下载 这个app(autoJs-V4.1.1.Alpha2-common-armeabi-v7a-debug下载地址: 来自https://github.com/Eri ...
- 使用Auto.js实现蚂蚁森林自动收取能量
在网上看了一些自动收能量的脚本 根据自己的手机型号 华为荣耀9 分辨率为1980*1080 写了一个脚本 使用AutoJs运行 定时每天早上7点开始收能量(再也不用担心我的能量被偷啦 哈哈~) Aut ...
- html5仿蚂蚁森林效果代码,vue仿支付宝蚂蚁森林水滴
APP 需要做一个类似蚂蚁森林的功能模块,动效和蚂蚁森林接近,可以有多个水滴,可以控制位置,水滴上下浮动. gif图如下所示: soogif.gif v-for="(item, index) ...
- 微信小程序 实现蚂蚁森林效果
wxml: <view class="view_energy"><!-- 能量球 --><view class="energy_all&qu ...
最新文章
- jQuery - 获取并设置 CSS 类
- html 并集选择器,CSS并集选择器
- live555源代码简介
- 比Java语言更好,为什么Java比其他解释语言具有更好的性能？
- python中统计数据的总和_Python 数据的累加与统计的示例代码
- 安装Ubuntu 12.04
- python服务器搭建nginx_python服务器环境搭建Flask，uwsgi和nginx
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
- Illegal use of when-style tag without ...
- 开务正式加入中国信通院数据库应用创新实验室
- 计算机室和电子备课室管理制度,电子备课室
- 谷歌桌面_将Google小工具添加到您的桌面
- linux ps-e和-ax区别,Linux编程 6 (查看进程 ps 及输出风格)
- python画三维坐标图像_用python检索xyz坐标并绘制三维图形
- Elasticsearch 新增字段
- r语言抓取维基百科表格数据
- AI实现语音文字处理，PaddleSpeech项目安装使用 | 机器学习
- [转帖] 中国手机设计公司IDH 大史记
- Problem I: 俊爷的局域网
- C语言 关于素数的程序