【hugo】- hugo 博客 添加鼠标单击特效

hugo 博客 监听鼠标点击事件，添加动画效果

js下载

链接：https://pan.baidu.com/s/1SZu76WdEXRxLCfqJ2lbbtQ 密码：r056

移入hugo博客中

打开路径下 themes/maupassant/layouts/_default/baseof.html 文件，添加成以下代码

这里的js路径需要根据自己的实际需要引入，我的是放在themes/maupassant/static/js/anime.min.js目录下

有时候会找不到js，是因为config.toml中baseURL不是根域名，如果有后缀的话，需要像下面一样，加上前缀

{{ partial "head" . }}


    {{ partial "header" . }}
        

            

                

                    

                        {{ block "content" . }}{{ end }}
                    
                    {{ partial "sidebar" . }}
                
            
        
    {{ partial "footer" . }}

修改样式

这里我对firework.js进行了修改，主要是显示的时间长短问题，具体位置如下
可以根据自己的需要自己修改

 function animateParticules(x, y) {
    var circle = createCircle(x, y);
    var particules = [];
    for (var i = 0; i < numberOfParticules; i++) {
      particules.push(createParticule(x, y));
    }
    anime.timeline().add({
      targets: particules,
      x: function(p) { return p.endPos.x; },
      y: function(p) { return p.endPos.y; },
      radius: 0.1,
      // -------------------------圆球消失的速度为 1900ms - 2400ms
      duration: anime.random(1900, 2400),
      easing: 'easeOutExpo',
      update: renderParticule
    })
    .add({
      targets: circle,
      radius: anime.random(180, 160),
      lineWidth: 0,
      alpha: {
        value: 0,
        easing: 'linear',
        duration: anime.random(800, 1000),
      },
      // -------------------------圆线消失的速度为 1900ms - 2400ms
      duration: anime.random(1900, 2400),
      easing: 'easeOutExpo',
      update: renderParticule,
      offset: 0
    }).add({
      targets: circle,
      radius: anime.random(180, 160),
      lineWidth: 0,
      alpha: {
        value: 0,
        easing: 'linear',
        duration: anime.random(800, 1000),
      },
      // -------------------------第二层圆线消失的速度为 2200ns - 2800ms
      duration: anime.random(2200, 2800),
      easing: 'easeOutExpo',
      update: renderParticule,
      offset: 0
    });
  }