【笔记】Next8.8实现樱花飘飘特效

发表于 阅读次数：

前言

这是出自Leo的博客樱花飘落动效，但是原作者的博客已经打开了，所以从维安雨轩的博客摘抄过来了

我将源码简单的封装成了函数，将飘落物的图片作为了函数的参数，方便以后如果需要飘落任何其他的图片，直接改参数就行了

源码

引入到博客

  • 在NexT8.8中引入，先在主题配置中解除一个自定义页面的注释

hexo/_config.next.yml

1
2
custom_file_path:
  header: source/_data/header.njk
  • 然后引入sakura.js文件

source/_data/header.njk

1
2
<!-- 加载樱花飘飘特效 -->
<script src="sakura.js"></script>

扩展

  • 如果需要修改飘落的图片，只需要在sakura.js的第三行LoadSakura("")修改参数为图片的src即可

我这里使用的樱花图片是Base64编码的，你也可以使用其他图片的路径，例如jpg、png

完成

参考文献

维安雨轩的博客