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.firstElementChild
var navClassName = navNode.className
// console.log(navClassName)
var flag = false;
// 内容块

// console.log(layoutPage.offsetTop)
// var topsize = bgUp.scrollTop
var ceilingLamp
// console.log(window.clientHeight)
if (window.pageYOffset >= 0) {
  // flag = true
  // var node = document.createElement("div");
  // var contentnode = document.createElement("img")
  // node.className = "ceilingLamp"
  // bgUp.appendChild(node)
  // node.appendChild(contentnode)
  ceilingLampF()
  clacHeight(ceilingLamp, flyNode)
}
document.addEventListener('scroll', function () {
  console.log(window.pageYOffset)
  if (window.pageYOffset >= 0 && flag == false) {
    ceilingLampF()
  } else if (window.pageYOffset >= 0) {
    clacHeight(ceilingLamp, flyNode)
  } else {
    console.log('隐藏吊灯')
  }
})


//  吊灯、库洛米的动态高度
function clacHeight(postNode, flyNode) {

  // window.pageYOffset : 是窗口被卷曲的长度
  var extent = window.pageYOffset
  if (navClassName == "full_page") {
    postNode.style.height = extent - 500 + "px"
    flyNode.style.top = postNode.style.height
  } else {
    postNode.style.height = extent + "px"
    flyNode.style.top = postNode.style.height

  }

}

//创建元素
function ceilingLampF() {
  flag = true
  var NewNode = document.createElement("div");
  var contentnode = document.createElement("div")

  NewNode.className = "ceilingLamp"
  navNode.appendChild(NewNode)

  contentnode.className = "fly"
  NewNode.appendChild(contentnode)

  ceilingLamp = document.querySelector(".ceilingLamp")
  flyNode = document.querySelector(".fly")
}

5. css 部分

.ceilingLamp {
  position: absolute;
  top: 100%;
  right: 15vh;
  width: 10px;
  border: 6px dashed rgb(230, 106, 160);
  background-color: rgb(72, 61, 78);
  height: 0px;
}

.fly {
  position: absolute;
  width: 120px;
  height: 130px;
  background: url(/img/fly.png) no-repeat;
  transform: translate(-50%, -35%);
  /* 我们元素可以添加多个动画， 用逗号分隔 */
  animation: flyKuluomi 1s steps(4) infinite;
}
@keyframes flyKuluomi {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -480px 0;
  }
}