hexo博客美化

工具
1.6k words

鼠标点击爆炸特效

在制作完评论系统后逛博客时看到的不错的烟花爆炸特效博文地址。

在 Blog\themes\particlex\source\js 目录下创建文件 fireworks.min.js 。

在 Blog\themes\particlex\layout 目录下打开 layout.ejs 文件，添加：

<canvas
    id="fireworks"
    style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767"
></canvas>
<script src="https://cdn.staticfile.org/animejs/3.2.1/anime.min.js"></script>
<script src="/js/fireworks.min.js"></script>

流星雨特效

根据主题作者的原教程使用。

在 Blog\themes\particlex\source\js 目录下创建文件 background.min.js 。

在 Blog\themes\particlex\layout 目录下打开 layout.ejs 文件，添加：

<canvas
    id="background"
    style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1"
></canvas>
<script src="/js/background.min.js"></script>

补充

要将背景图片层级上移，在 Blog\themes\particlex\source\css 目录下对 main.css 文件进行修改：

#home-head #home-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 0;
}

代码雨特效

在 Blog\themes\particlex\source\js 目录下创建文件 digitalrain.min.js

在 Blog\themes\particlex\source\css 目录下创建文件 digitalrain.min.css

在 Blog\themes\particlex\layout 目录下打开 layout.ejs 文件，添加：

<!-- 数字雨 -->
<canvas id="canvas" width="1440" height="900" ></canvas>
<link rel="stylesheet" href="/css/digitalrain.min.css" />
<script type="text/javascript" src="/js/digitalrain.min.js"></script>

补充

因为在 layout.ejs 文件下设置会在全局生效，而代码雨在文章页会显得非常乱，所以我把其挪到了 index.ejs 文件下，然后将流星雨特效放回 layout.ejs 文件，即可实现代码雨特效仅在主页生效。

Comments