更多>
最新下载
24小时阅读排行榜
- 1 Python 数据结构优化与性能调优思路
- 2 Linux 内核版本升级的风险与收益
- 3 Python 类属性与实例属性的查找顺序
- 4 Laravel 9 路由顺序导致 {id}/edit 匹配失败的解决方案
- 5 Python 日志系统设计与实践
- 6 SQL 高并发下事务如何设计?
- 7 Python 函数签名设计与可读性原则
- 8 如何让异常支持自定义属性但不改变异常类型
- 9 Python 数据结构选择对算法性能的影响
- 10 datetime 如何处理不存在的时间(如夏令时跳跃)
- 11 SQL 如何统计中位数与百分位?
- 12 Python 如何写出可测试的函数
- 13 ipset + iptables 白名单端口误封自己的自解封命令
- 14 Python 内存分析工具 tracemalloc 实战
- 15 SQL CPU 飙高的典型原因
更多>
最新教程
-
- Node.js 教程
- 16151 2025-08-28
-
- CSS3 教程
- 1546636 2025-08-27
-
- Rust 教程
- 23286 2025-08-27
-
- Vue 教程
- 25752 2025-08-22
-
- PostgreSQL 教程
- 22237 2025-08-21
-
- Git 教程
- 9214 2025-08-21
html5+CSS3杯子里萤火虫发光动画特效
js代码
<script src="js/TweenMax.min.js"></script>
<script>
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)})
})</script>
本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn
