前言

之前有人反映我的站点特别卡

也不是没有去优化。。。。。但是依然有人说很卡

我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫

于是我给这个抄下来了

不废话，正片开始！

教程开始！

新建js

首先，新建[Blogroot]\themes\butterfly\source\js\nyan.js，内容如下：

javascript

function cycleFrames (_nyanCat, _currentFrame) {
	_nyanCat.classList = []
	_nyanCat.classList.add(`frame${_currentFrame}`)
}

function replicateSparks (_sparksRow) {
	const numberOfRowsToCoverEntireScreen = Math.ceil(document.getElementById("loading-box").offsetHeight / _sparksRow.offsetHeight)
	const newSparksRows = document.createElement('div')

	for (let a = 0; a < numberOfRowsToCoverEntireScreen-1; a++) {
		newSparksRows.append(_sparksRow.cloneNode(true))
	}

	document.getElementById("loading-box").prepend(newSparksRows)
}

(function () {
	let nyanCat = document.getElementById('nyan-cat')
	let currentFrame = 1

	replicateSparks(document.getElementsByClassName('sparks-combo')[0])

	setInterval(function () {
		currentFrame = (currentFrame % 6) + 1
		cycleFrames(nyanCat, currentFrame)
	}, 70)
})()

这个是用来自动生成div，使得星星可以铺满屏幕

选择方案

以下三种方案任意选择一种：

店长魔改方案

如果你博客有参考店长的这个教程：Loading Animation

那就按照这个教程魔改就行

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug

diff

if theme.preloader.enable
  case theme.preloader.load_style    
    when 'gear'
      include ./load_style/gear.pug
    when 'ironheart'
      include ./load_style/ironheart.pug
    when 'scarecrow'
      include ./load_style/scarecrow.pug
    when 'triangles'
      include ./load_style/triangles.pug
    when 'wizard'
      include ./load_style/wizard.pug
    when 'image'
      include ./load_style/image.pug
+    when 'nyancat'
+      include ./load_style/nyancat.pug
    default
      include ./load_style/default.pug

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\nyancat.pug，内容如下：

pug

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
    .sparks-combo
        .spark
        .spark
        .spark
        .spark
    .rainbow
        span
    .nyan-cat
        .feet
        .tail
            span
        .body
        .head
    script(src="/js/nyan.js")

script.
    const preloader = {
        endLoading: () => {
            document.body.style.overflow = 'auto';
            document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
            document.body.style.overflow = '';
            document.getElementById('loading-box').classList.remove("loaded")

        }
    }
    window.addEventListener('load',()=> { preloader.endLoading() })

    if (!{theme.pjax && theme.pjax.enable}) {
        document.addEventListener('pjax:send', () => { preloader.initLoading() })
        document.addEventListener('pjax:complete', () => { preloader.endLoading() })
    }

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl

diff


if hexo-config('preloader.enable')
  if hexo-config('preloader.load_style') == 'gear'
    @import './_load_style/gear'
  else if hexo-config('preloader.load_style') == 'ironheart'
    @import './_load_style/ironheart'
  else if hexo-config('preloader.load_style') == 'scarecrow'
    @import './_load_style/scarecrow'
  else if hexo-config('preloader.load_style') == 'triangles'
    @import './_load_style/triangles'
  else if hexo-config('preloader.load_style') == 'wizard'
    @import './_load_style/wizard'
  else if hexo-config('preloader.load_style') == 'image'
    @import './_load_style/image'
+  else if hexo-config('preloader.load_style') == 'nyancat'
+    @import './_load_style/nyancat'
  else
    @import './_load_style/default'

新建[Blogroot]\themes\butterfly\source\css\_load_style\nyancat.styl，内容如下：

stylus

#loading-box
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #036;
  overflow: hidden;
  position : fixed;
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  z-index: 9999;
  opacity: 1;

  &.loaded
    opacity: 0;
    z-index: -1000;

  .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
    position: absolute;
    background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
    background-size: 100% 5px;
    background-repeat: no-repeat;


  .nyan-cat
    position: fixed;
    left: 50%;
    top: 50%;
    width: 165px;
    height: 100px;
    margin-top: -50px;
    margin-left: -82px;
    -webkit-animation: nyan 400ms step-start infinite;
    animation: nyan 400ms step-start infinite;
    z-index: 19999;

  .body
    left: 35px;
    top: 0;
    width: 105px;
    height: 90px;

  .head
    left: 85px;
    top: 25px;
    width: 80px;
    height: 65px;
    -webkit-animation: head 400ms linear infinite;
    animation: head 400ms linear infinite;

  .rainbow
    position: fixed;
    left: 0;
    top: 50%;
    margin-top: -35px;
    width: 50%;
    height: 65px;
    overflow: hidden;
    z-index: 18888;

    span
      display: block;
      position: relative;
      top: 0;
      width: 100%;
      height: 130px;
      background-size: 80px 5px;
      background-repeat: repeat-x;
      -webkit-animation: rainbow 400ms step-start infinite;
      animation: rainbow 400ms step-start infinite;

  .feet
    left: 20px;
    top: 75px;
    width: 120px;
    height: 25px;
    -webkit-animation: feet 400ms infinite;
    animation: feet 400ms infinite;

  .tail
    position: relative;
    width: 25px;
    height: 30px;
    overflow: hidden;
    top: 30px;
    left: 10px;

    span
      width: 25px;
      height: 120px;
      -webkit-animation: tail 200ms step-start infinite alternate;
      animation: tail 200ms step-start infinite alternate;
  
  .sparks-combo 
    height: 300px;
    width: 200%;
    position: relative;
    animation: woosh 700ms 0ms linear infinite both;

  .spark 
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

    &:before 
      background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

    &:after 
      background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

    &:before,&:after 
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
    
    

    &:nth-child(1) 
      z-index: 3;
      top: 0;
      left: 20px;
      animation: sparkly 700ms 0ms steps(1) infinite both;

    &:nth-child(1):before 
      animation: sparkly-before 700ms 0ms steps(1) infinite both;

    &:nth-child(1):after 
      animation: sparkly-after 700ms 0ms steps(1) infinite both;

    &:nth-child(2) 
      top: 40px;
      left: 170px;
      animation: sparkly 700ms 200ms steps(1) infinite both;

    &:nth-child(2):before 
      animation: sparkly-before 700ms 200ms steps(1) infinite both;

    &:nth-child(2):after 
      animation: sparkly-after 700ms 200ms steps(1) infinite both;

    &:nth-child(3) 
      top: 100px;
      left: 320px;
      animation: sparkly 700ms 400ms steps(1) infinite both;

    &:nth-child(3):before 
      animation: sparkly-before 700ms 400ms steps(1) infinite both;

    &:nth-child(3):after 
      animation: sparkly-after 700ms 400ms steps(1) infinite both;

    &:nth-child(4) 
      top: 150px;
      left: 200px;
      animation: sparkly 700ms 600ms steps(1) infinite both;

    &:nth-child(4):before 
      animation: sparkly-before 700ms 600ms steps(1) infinite both;

    &:nth-child(4):after 
      animation: sparkly-after 700ms 600ms steps(1) infinite both;


  .body
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);
    
  .head 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

  .rainbow > span 
    background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


  .feet 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


  .tail > span 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}

@keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}
@-webkit-keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@-webkit-keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@-webkit-keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@-webkit-keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes woosh {
  0% {
    left: 0px;
  }
  100% {
    left: -400px;
  }
}
@keyframes sparkly {
  0% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  33% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  50% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 400px 11px, 400px 11px, 0 0, 0 0;
    background-position: 17px 6px, 17px 23px, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 11px 17px, 22px 17px;
  }
  100% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-before {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
    background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
  }
  50% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 17px 12px, 17px 22px;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-after {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  50% {
    background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
    background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
  }
  66% {
    background-size: 0 0, 0 0, 400px 6px, 400px 6px;
    background-position: 0 0, 0 0, 6px 17px, 23px 17px;
  }
  83% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}

修改[Blogroot]\_config.butterfly.yml的preloader.load_style配置项

yml

preloader:
  enable: true
  load_color: '#000000' # '#37474f'
  load_style: nyancat # 这边改成nyancat

butterfly 4.5 以上方案

修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.pug，复制以下代码替换全部内容。

pug

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
    .sparks-combo
        .spark
        .spark
        .spark
        .spark
    .rainbow
        span
    .nyan-cat
        .feet
        .tail
            span
        .body
        .head
    script(src="/js/nyan.js")

script.
    const preloader = {
        endLoading: () => {
            document.body.style.overflow = 'auto';
            document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
            document.body.style.overflow = '';
            document.getElementById('loading-box').classList.remove("loaded")

        }
    }
    window.addEventListener('load',()=> { preloader.endLoading() })

    if (!{theme.pjax && theme.pjax.enable}) {
        document.addEventListener('pjax:send', () => { preloader.initLoading() })
        document.addEventListener('pjax:complete', () => { preloader.endLoading() })
    }

修改[Blogroot]\themes\butterfly\layout\includes\loading\index.pug，复制以下代码替换全部内容。

pug

if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else
  include ./fullpage-loading.pug
  include ./pace.pug

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

stylus

#loading-box
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #036;
  overflow: hidden;
  position : fixed;
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  z-index: 9999;
  opacity: 1;

  &.loaded
    opacity: 0;
    z-index: -1000;

  .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
    position: absolute;
    background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
    background-size: 100% 5px;
    background-repeat: no-repeat;


  .nyan-cat
    position: fixed;
    left: 50%;
    top: 50%;
    width: 165px;
    height: 100px;
    margin-top: -50px;
    margin-left: -82px;
    -webkit-animation: nyan 400ms step-start infinite;
    animation: nyan 400ms step-start infinite;
    z-index: 19999;

  .body
    left: 35px;
    top: 0;
    width: 105px;
    height: 90px;

  .head
    left: 85px;
    top: 25px;
    width: 80px;
    height: 65px;
    -webkit-animation: head 400ms linear infinite;
    animation: head 400ms linear infinite;

  .rainbow
    position: fixed;
    left: 0;
    top: 50%;
    margin-top: -35px;
    width: 50%;
    height: 65px;
    overflow: hidden;
    z-index: 18888;

    span
      display: block;
      position: relative;
      top: 0;
      width: 100%;
      height: 130px;
      background-size: 80px 5px;
      background-repeat: repeat-x;
      -webkit-animation: rainbow 400ms step-start infinite;
      animation: rainbow 400ms step-start infinite;

  .feet
    left: 20px;
    top: 75px;
    width: 120px;
    height: 25px;
    -webkit-animation: feet 400ms infinite;
    animation: feet 400ms infinite;

  .tail
    position: relative;
    width: 25px;
    height: 30px;
    overflow: hidden;
    top: 30px;
    left: 10px;

    span
      width: 25px;
      height: 120px;
      -webkit-animation: tail 200ms step-start infinite alternate;
      animation: tail 200ms step-start infinite alternate;
  
  .sparks-combo 
    height: 300px;
    width: 200%;
    position: relative;
    animation: woosh 700ms 0ms linear infinite both;

  .spark 
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

    &:before 
      background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

    &:after 
      background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

    &:before,&:after 
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
    
    

    &:nth-child(1) 
      z-index: 3;
      top: 0;
      left: 20px;
      animation: sparkly 700ms 0ms steps(1) infinite both;

    &:nth-child(1):before 
      animation: sparkly-before 700ms 0ms steps(1) infinite both;

    &:nth-child(1):after 
      animation: sparkly-after 700ms 0ms steps(1) infinite both;

    &:nth-child(2) 
      top: 40px;
      left: 170px;
      animation: sparkly 700ms 200ms steps(1) infinite both;

    &:nth-child(2):before 
      animation: sparkly-before 700ms 200ms steps(1) infinite both;

    &:nth-child(2):after 
      animation: sparkly-after 700ms 200ms steps(1) infinite both;

    &:nth-child(3) 
      top: 100px;
      left: 320px;
      animation: sparkly 700ms 400ms steps(1) infinite both;

    &:nth-child(3):before 
      animation: sparkly-before 700ms 400ms steps(1) infinite both;

    &:nth-child(3):after 
      animation: sparkly-after 700ms 400ms steps(1) infinite both;

    &:nth-child(4) 
      top: 150px;
      left: 200px;
      animation: sparkly 700ms 600ms steps(1) infinite both;

    &:nth-child(4):before 
      animation: sparkly-before 700ms 600ms steps(1) infinite both;

    &:nth-child(4):after 
      animation: sparkly-after 700ms 600ms steps(1) infinite both;


  .body
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);
    
  .head 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

  .rainbow > span 
    background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


  .feet 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


  .tail > span 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}

@keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}
@-webkit-keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@-webkit-keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@-webkit-keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@-webkit-keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes woosh {
  0% {
    left: 0px;
  }
  100% {
    left: -400px;
  }
}
@keyframes sparkly {
  0% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  33% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  50% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 400px 11px, 400px 11px, 0 0, 0 0;
    background-position: 17px 6px, 17px 23px, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 11px 17px, 22px 17px;
  }
  100% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-before {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
    background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
  }
  50% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 17px 12px, 17px 22px;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-after {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  50% {
    background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
    background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
  }
  66% {
    background-size: 0 0, 0 0, 400px 6px, 400px 6px;
    background-position: 0 0, 0 0, 6px 17px, 23px 17px;
  }
  83% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}

最后修改_config.butterfly.yml中preloader选项, 改完以后source: 1为满屏加载无pace胶囊,source: 2为pace胶囊无满屏动画, source: 3是两者都启用。

yml

# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  # else all
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/progress_bar.css
  avatar: # 自定义头像

butterfly 4.4.2 以下版本方案

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

stylus

#loading-box
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #036;
  overflow: hidden;
  position : fixed;
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  z-index: 9999;
  opacity: 1;

  &.loaded
    opacity: 0;
    z-index: -1000;

  .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
    position: absolute;
    background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
    background-size: 100% 5px;
    background-repeat: no-repeat;


  .nyan-cat
    position: fixed;
    left: 50%;
    top: 50%;
    width: 165px;
    height: 100px;
    margin-top: -50px;
    margin-left: -82px;
    -webkit-animation: nyan 400ms step-start infinite;
    animation: nyan 400ms step-start infinite;
    z-index: 19999;

  .body
    left: 35px;
    top: 0;
    width: 105px;
    height: 90px;

  .head
    left: 85px;
    top: 25px;
    width: 80px;
    height: 65px;
    -webkit-animation: head 400ms linear infinite;
    animation: head 400ms linear infinite;

  .rainbow
    position: fixed;
    left: 0;
    top: 50%;
    margin-top: -35px;
    width: 50%;
    height: 65px;
    overflow: hidden;
    z-index: 18888;

    span
      display: block;
      position: relative;
      top: 0;
      width: 100%;
      height: 130px;
      background-size: 80px 5px;
      background-repeat: repeat-x;
      -webkit-animation: rainbow 400ms step-start infinite;
      animation: rainbow 400ms step-start infinite;

  .feet
    left: 20px;
    top: 75px;
    width: 120px;
    height: 25px;
    -webkit-animation: feet 400ms infinite;
    animation: feet 400ms infinite;

  .tail
    position: relative;
    width: 25px;
    height: 30px;
    overflow: hidden;
    top: 30px;
    left: 10px;

    span
      width: 25px;
      height: 120px;
      -webkit-animation: tail 200ms step-start infinite alternate;
      animation: tail 200ms step-start infinite alternate;
  
  .sparks-combo 
    height: 300px;
    width: 200%;
    position: relative;
    animation: woosh 700ms 0ms linear infinite both;

  .spark 
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

    &:before 
      background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

    &:after 
      background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

    &:before,&:after 
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
    
    

    &:nth-child(1) 
      z-index: 3;
      top: 0;
      left: 20px;
      animation: sparkly 700ms 0ms steps(1) infinite both;

    &:nth-child(1):before 
      animation: sparkly-before 700ms 0ms steps(1) infinite both;

    &:nth-child(1):after 
      animation: sparkly-after 700ms 0ms steps(1) infinite both;

    &:nth-child(2) 
      top: 40px;
      left: 170px;
      animation: sparkly 700ms 200ms steps(1) infinite both;

    &:nth-child(2):before 
      animation: sparkly-before 700ms 200ms steps(1) infinite both;

    &:nth-child(2):after 
      animation: sparkly-after 700ms 200ms steps(1) infinite both;

    &:nth-child(3) 
      top: 100px;
      left: 320px;
      animation: sparkly 700ms 400ms steps(1) infinite both;

    &:nth-child(3):before 
      animation: sparkly-before 700ms 400ms steps(1) infinite both;

    &:nth-child(3):after 
      animation: sparkly-after 700ms 400ms steps(1) infinite both;

    &:nth-child(4) 
      top: 150px;
      left: 200px;
      animation: sparkly 700ms 600ms steps(1) infinite both;

    &:nth-child(4):before 
      animation: sparkly-before 700ms 600ms steps(1) infinite both;

    &:nth-child(4):after 
      animation: sparkly-after 700ms 600ms steps(1) infinite both;


  .body
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);
    
  .head 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

  .rainbow > span 
    background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


  .feet 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


  .tail > span 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}

@keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}
@-webkit-keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@-webkit-keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@-webkit-keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@-webkit-keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes woosh {
  0% {
    left: 0px;
  }
  100% {
    left: -400px;
  }
}
@keyframes sparkly {
  0% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  33% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  50% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 400px 11px, 400px 11px, 0 0, 0 0;
    background-position: 17px 6px, 17px 23px, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 11px 17px, 22px 17px;
  }
  100% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-before {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
    background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
  }
  50% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 17px 12px, 17px 22px;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-after {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  50% {
    background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
    background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
  }
  66% {
    background-size: 0 0, 0 0, 400px 6px, 400px 6px;
    background-position: 0 0, 0 0, 6px 17px, 23px 17px;
  }
  83% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}

修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.pug，复制以下代码替换全部内容。

pug

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
    .sparks-combo
        .spark
        .spark
        .spark
        .spark
    .rainbow
        span
    .nyan-cat
        .feet
        .tail
            span
        .body
        .head
    script(src="/js/nyan.js")

前言 ​

教程开始！ ​

新建js ​

选择方案 ​

店长魔改方案 ​

butterfly 4.5 以上方案 ​

butterfly 4.4.2 以下版本方案 ​

前言

教程开始！

新建js

选择方案

店长魔改方案

butterfly 4.5 以上方案

butterfly 4.4.2 以下版本方案