博客深色模式下添加粒子流星划过效果canvas

2023-4-5 12:00 • 网页代码 • 阅读 1351

给博客深色模式下添加粒子效果canvas，深色模式下，总感觉背景有点单调，也考虑过添加背景图，还是太花了，看到别站深色模式好似夜间有流星划过，感觉这就是我想要的效果，果断整上。

魔改步骤

第一步主题中添加配置项(butterfly.yml)

# 深色模式粒子效果
darkCanvas:
  enable: true

第二步引入js(additional-js.pug)

//- 黑色模式粒子效果canvas
if theme.universe.enable
  canvas(id="universe")
  script(async src="/mx/js/dark.js")

第三步添加dark.js文件

此处内容已隐藏，评论后刷新即可查看！

第四步添加css

[data-theme="dark"] #universe {
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

canvas#universe {
  display: none;
}

博客深色模式粒子效果流星划过 canvas

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
如若转载，请注明出处：https://www.zxki.cn/6109.html