Hexo+buttterfly适合任意主题美化(悬挂动态修饰物)

使用（css+js） 代码实现将静态图片绘制成动态 gif ，我将其应用到每个有 nav 盒子的页面，成品效果如下：

飞行库洛米吊饰

我的博客：piaohuier
具体步骤如下：

1. 找想要的图片（注意：不是 gif 动图）
   如下，原图120*130 px：
   
2. PS 绘制 css 图片素材
   
   复制图片，改造图片动作，绘制成几份图片。其中，4 个小图高宽相同，因此整个图是高130px,宽120*4=480px
3. 引入代码设置
   img:将放在主题目录下：\blog\themes\Butterfly\source\img\XXX.png
   css:主题目录下：\blog\themes\Butterfly\source\css\background.css
   javascript:主题配置文件：butterfly.yml，找到inject部分，如下：

inject:
  bottom:
  // 主题目录下的相对路径
    - <script src="/js/my-js/diy.js"></script>

4. JavaScript 代码部分
   通过原生 JavaScript ，主要思想是使用 createElement方法、appendChild 方法和className

//测试 是否引入
//  alert('')
// 头部大背景元素
// 获取每个页面共同元素 body_wrap
var body_wrap = document.querySelector('#body-wrap')
// 记录是否创建元素
// 是否首页
// 原生 jS 没有链式编程，因此分别存储
var navNode = body_wrap.firs