html 萤火虫特效,html5关在杯子里萤火虫动画特效
特效描述:html5 萤火虫动画特效。html5关在杯子里跟随鼠标摇晃的萤火虫发光动画特效。
代码结构
1. 引入JS
2. HTML代码
var numP = 50;
TweenMax.set("#content", {transformOrigin:"50% -45%"})
//TweenMax.fromTo("#particles", .7, {background:'rgb(16,17,24)'}, {background:'rgb(18,15,23)', repeat:-1, yoyo:true, ease:Elastic.easeInOut})
for (var i = 0; i<=numP; i++) {
if (i==0){
TweenMax.set("#p0", {scale:0})
//loop(document.getElementById('p0'), 0);
}
else {
var _p = document.getElementById('p0').cloneNode(false);
_p.id = "p" + i;
document.getElementById('particles').appendChild(_p);
TweenMax.fromTo(_p, 13, {
x:120+110*Math.random(),
y:200+250*Math.random(),
scale:3*Math.random()
},{
bezier:{ type:'thru', values:[
{x:99+60*Math.random(), y:50+100*Math.random(), scale:.5+Math.random(), alpha:1},
{x:40+80*Math.random(), y:200+160*Math.random(), scale:3-Math.random(), alpha:0.25},
{x:60+60*Math.random(), y:390+50*Math.random(), scale:3*Math.random(), alpha:.7+.3*Math.random()}],
},
onComplete:loop,
onCompleteParams:[_p],
ease:Sine.easeInOut
}).progress(i/numP)
}
function loop(_p){
var tl = new TimelineMax({yoyo:true, repeat:-1})
//.to(_p, 3, {x:100+50*Math.random(), y:380+50*Math.random(), scale:1+2*Math.random(), ease:Linear.easeNone}, 0)
.to(_p, 14, {
ease:Sine.easeInOut,//Linear.easeNone,
bezier:{ type:'thru', values:[
{x:190+30*Math.random(), y:100+60*Math.random(), scale:3-Math.random()},
{x:190+50*Math.random(), y:150+100*Math.random(), scale:.5+Math.random(), alpha:1},
{x:190-60*Math.random(), y:200+160*Math.random(), scale:3-Math.random(), alpha:0.25},
{x:200-70*Math.random(), y:390+50*Math.random(), scale:3*Math.random(), alpha:1}],
}})
window.addEventListener('mousemove',function(e){
TweenMax.to("#content", .5, {x:-400+800*(e.clientX/window.innerWidth), rotation:-25+50*(e.clientX/window.innerWidth)})
})
html 萤火虫特效,html5关在杯子里萤火虫动画特效相关推荐
- html map热点特效,html5 svg卡通世界地图热点动画特效
特效描述:html5 svg 卡通世界地图 热点动画特效.html5 svg绘制圆形世界地图热点线性动画展示特效. 代码结构 1. 引入JS 2. HTML代码 var select = functi ...
- 汽车 配件 html 特效,html5 echarts汽车仪表盘图表动画特效
特效描述:html5 echarts 汽车仪表盘 图表动画特效,html5汽车仪表盘,第一次从使用echarts,如何调用js,CSS,测试 代码结构 1. 引入JS 2. HTML代码 // 基于准 ...
- HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体 粒子波浪动画.3D 粒子动画特效 代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
- 如何设置HTML背景特效,HTML5之按钮背景不同动画特效设计
今天来给大家介绍一下HTML5,讲什么呢,讲讲一组效果非常酷的鼠标滑过按钮背景动画特效. 在该特效中,当鼠标滑过按钮时,使用CSS3 animation来动画background-size和backg ...
- css3上升悬浮粒子特效,HTML5 CSS3星空背景悬浮粒子动画特效
CSS 语言: CSSSCSS 确定 /* Config */ /* Styles */ html, body { height: 100%; } body { display: -webkit-bo ...
- html 萤火虫特效,html5+CSS3杯子里萤火虫发光动画特效
html5+CSS3杯子里萤火虫发光动画特效 js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:" ...
- HTML5 canvas点击爆炸网页特效代码
简介: HTML5 canvas点击爆炸网页特效代码, 直接写在想要出现特效的页面,如果是cms则放在所用的模板文件下foot.php文件里. 网盘下载地址: http://kekewl.net/3D ...
- html 5抽奖特效,利用HTML5实现Canvas大转盘抽奖特效
特效描述:利用HTML5实现 Canvas 大转盘 抽奖特效.利用HTML5实现Canvas大转盘抽奖特效 代码结构 1. 引入JS 2. HTML代码 当前浏览器版本过低,请使用其他浏览器尝试 va ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"><d ...
最新文章
- 首长!图灵方队请您检阅
- 改进SmallNet的BCI可以用于BrainRunners电子游戏的脑电解码分类
- NFV — 高性能 NFVI
- c语言会一点然后学java_学C语言自己写的一个程序
- 《玩转git三剑客》笔记
- Trie树统计单词前缀
- 2009计算机统考真题,2009年计算机统考真题(完整版).PDF
- 现金流量表的内容和结构
- SpringBootApplication注解
- Java————迷宫问题
- pae扩展内存 linux,Linux内核-内存管理-PAE(物理地址扩展)
- STM32——EEPROM
- MPU9250调试笔记(融合磁力计计算Yaw)
- Delphi——数组(静态数组和动态数组)、地址和指针
- 2021年数学建模国赛A题优秀论文(Word)(FAST”工作抛物面的优化设计)
- 阿里云对象存储OSS简介和使用
- 电商平台二清该怎样合规?
- 计算机科学报数学竞赛,五大学科竞赛参加哪一个科目?五大学科竞赛赛程设置分析!...
- 李南江的前端课程知识点(九)浮动流
- manifest权限