• 正文概述
  • 售后服务
  • 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>

    html5+CSS3杯子里萤火虫发光动画特效 网页特效 第1张

    青柠资源网专注于CMS网站模板,主流语言整站网站源码下载,网站建设相关教程分享,好用的软件素材整合下载,提供一站式便捷自助服务。
    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.qnziyw.cn",如遇到无法解压的请联系管理员!


    青柠资源网 » html5+CSS3杯子里萤火虫发光动画特效

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们。
    找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单

    发表回复