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
});
}原文地址：https://www.cnblogs.com/somliy/p/12241405.html
时间： 2024-10-16 11:54:50