2020-1-29-hugo-1.gif
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="/js/anime.min.js"></script>
<script src="/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
});
}
