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

  • A+
所属分类:其他源码

给下添加,下,总感觉背景有点单调,也考虑过添加背景图,还是太花了,看到别站好似夜间有,感觉这就是我想要的效果,果断整上。

魔改步骤

第一步主题中添加配置项(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; } 

  • 我的微信公众号
  • 扫一扫关注
  • weinxin
  • 我的新浪微博号
  • 扫一扫关注
  • weinxin
小辉博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: