【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不是根域名，如果有后缀的话，需要像下面一样，加上前缀

<!-------------------------------------新增 - start------------------------------->
<style type="text/css">
	.fireworks {
		position: fixed;
		pointer-events: none;
		top: 0;
		left: 0;
		height: 100%;
	}
</style>
<canvas class="fireworks"></canvas>
<script src="/hugo-blog/js/anime.min.js"></script>
<script src="/hugo-blog/js/fireworks.js"></script>
<script type="text/javascript">
  fireworks.setCanvasSize();
</script>

<!-------------------------------------新增 - end------------------------------->

<!doctype html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}zh-CN{{end}}">
{{ partial "head" . }}

<body>
    {{ partial "header" . }}
        <div id="body">
            <div class="container">
                <div class="col-group">
                    <div class="col-8" id="main">
                        {{ block "content" . }}{{ end }}
                    </div>
                    {{ partial "sidebar" . }}
                </div>
            </div>
        </div>
    {{ partial "footer" . }}
</body>

</html>

修改样式

这里我对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
    });
  }
posted @ 2020-01-29 20:59  somliy  阅读(820)  评论(1)  编辑  收藏  举报