普通视图

发现新文章，点击刷新页面。

昨天以前首页

汐塔魔法屋
真·彩虹猫加载动画王九弦SZ·Ninty
前言之前有人反映我的站点特别卡也不是没有去优化。。。。。但是依然有人说很卡我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫于是我给这个抄下来了不废话，正片开始！教程开始！新建js首先，新建[Blogroot]\themes\butterfly\source\js\nyan.js，内容如下：123456789101112131415161718192021222324252627function 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 newSparksR
2024年8月3日 01:12
- 分享
- Email
- archive.is
- Twitter
❌

真·彩虹猫加载动画

汐塔魔法屋

作者王九弦SZ·Ninty

2024年8月3日 01:12

前言

之前有人反映我的站点特别卡
也不是没有去优化。。。。。但是依然有人说很卡
我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫
于是我给这个抄下来了
不废话，正片开始！

教程开始！

新建js

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

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

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，内容如下：

#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


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，内容如下：

#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配置项

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

butterfly 4.5 以上方案

修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.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，复制以下代码替换全部内容。

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，复制以下代码替换全部内容。

#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是两者都启用。（这边懒得说就搬运的鱼佬那加载动画的教程了。。。。。反正都一样。。。。。）

# 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，复制以下代码替换全部内容。

#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，复制以下代码替换全部内容。

#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")

汐塔魔法屋
Ruffle测试王九弦SZ·Ninty
这玩意也是很久之前就认识到了我甚至记得我还给这玩意写过Hexo插件但后来我给这个插件删了，因为这玩意的配置真的简单介绍随着网页的安全性升级，带有安全漏洞的Flash也逐渐被淘汰，现在的主流浏览器几乎都不支持Flash也因此，很多的站点都已经废弃掉他们的flash了但后面我找到了一款叫Ruffle的工具，这玩意是个全新的开源Flash项目，旨在从本地到网页完全替代老旧的Flash而且不同于带有安全漏洞的Flash，Ruffle采用了高效安全的Rust语言编写，同时完全开源保证了及时修补漏洞搞这玩意的很多教程都是得在浏览器安装插件，让用户通过这个插件来实现播放flash但我在Ruffle的官网找到个这玩意：这玩意能通过引入在站点js的方式来让自己的站点再次适配swf那就废话不多说，赶紧开始吧！（话说好像在2024好像只有我对flash依然这么感兴趣。。。。。。。）配置Ruffle教程基础只需要在站点下面引入这行代码就可以了1<script src="https://jsd.onmicrosoft.cn/npm/@ruffle-rs/ruffle"></script>
2024年5月26日 05:12
- 分享
- Email
- archive.is
- Twitter
❌

Ruffle测试

汐塔魔法屋

作者王九弦SZ·Ninty

2024年5月26日 05:12

这玩意也是很久之前就认识到了
我甚至记得我还给这玩意写过Hexo插件
~~但后来我给这个插件删了，因为这玩意的配置真的简单~~

介绍

随着网页的安全性升级，带有安全漏洞的Flash也逐渐被淘汰，现在的主流浏览器几乎都不支持Flash
也因此，很多的站点都已经废弃掉他们的flash了
但后面我找到了一款叫Ruffle的工具，这玩意是个全新的开源Flash项目，旨在从本地到网页完全替代老旧的Flash
而且不同于带有安全漏洞的Flash，Ruffle采用了高效安全的Rust语言编写，同时完全开源保证了及时修补漏洞

搞这玩意的很多教程都是得在浏览器安装插件，让用户通过这个插件来实现播放flash
但我在Ruffle的官网找到个这玩意：
官网截图
这玩意能通过引入在站点js的方式来让自己的站点再次适配swf

那就废话不多说，赶紧开始吧！
~~（话说好像在2024好像只有我对flash依然这么感兴趣。。。。。。。）~~

配置Ruffle教程

基础

只需要在站点下面引入这行代码就可以了

1	<script src="https://jsd.onmicrosoft.cn/npm/@ruffle-rs/ruffle"></script>

如果你想用swfobject来引入swf的话，还得另外引入这个代码：

1	<script src="https://jsd.onmicrosoft.cn/gh/swfobject/swfobject@master/swfobject/swfobject.js"></script>

之后就可以在站点放置flash动画了！
不过估计也有人不知道flash动画怎么放，我这里就写个Demo吧！

Demo

1.Flash音乐播放器（没有SWFObject的）

测试音乐：Rain And Tears (纯音乐) - Pop Mania
（这首歌是一个虎牙中的一位MC实况主经常用的背景音乐，这位实况主还是我第一位关注的玩MC的实况主，然后我就对这个bgm印象很深）

新浪的

<embed width="238" height="24" name="FlashVars" wmode="opaque" play="true" loop="true" scale="showall" src="https://files.blog.sinzmise.top/swf/sina_music_player.swf" FlashVars="url=https%3A%2F%2Ffiles.blog.sinzmise.top%2Fmp3%2FRainAndTears.mp3" type="application/x-shockwave-flash"></embed>

人人网的

<embed width="360" height="30" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="sameDomain" bgcolor="#ffffff" scale="noscale" quality="high" menu="false" loop="false" wmode="transparent" src="https://files.blog.sinzmise.top/swf/renren_music_player.swf?url=https%3A%2F%2Ffiles.blog.sinzmise.top%2Fmp3%2FRainAndTears.mp3&Autoplay=0" />

开心网的

<embed width="365" height="50" align="middle" flashvars="url=https%3A%2F%2Ffiles.blog.sinzmise.top%2Fmp3%2FRainAndTears.mp3&autoplay=0" src="https://files.blog.sinzmise.top/swf/kaixin_music_player.swf" wmode="transparent" loop="false" menu="false" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>

还没写完，后续再写更多Demo

汐塔魔法屋
给你的站点添加个可可爱爱的看板娘——伪春菜王九弦SZ·Ninty
前言什么是伪春菜？请看这里作为一个早在xp时代就出现的桌面精灵，伪春菜有了爆火的人气后来不知道什么时候开始在国内由盛转衰，直到现在我对这个圈子少之又少我自己也下载了ssp并且应用了后来某位大佬复活的Taromati2人格某次我逛逛某个博客站点时发现有个站点将伪春菜当成了看板娘就去去搜了一下，得到的结果是：http://www.lmyoaoa.com/inn/archives/4504/又因为这玩意已经很久没更新，所以我将这个的js、css和图片提取出来，然后魔改了一下，方便放在hexo里面废话不多说，开始吧！引入js和css{blogroot}/source/weichuncai/css/style.css12345678910111213141516171819202122232425#smchuncai {opacity:0.85;width:160px;height:160px;position:fixed;top:400px;left:800px;font-size:12px;}* html #smchuncai {position:absolute;}#chuncaiface
2024年2月17日 01:17
- 分享
- Email
- archive.is
- Twitter
❌

给你的站点添加个可可爱爱的看板娘——伪春菜

汐塔魔法屋

作者王九弦SZ·Ninty

2024年2月17日 01:17

前言

什么是伪春菜？请看这里
作为一个早在xp时代就出现的桌面精灵，伪春菜有了爆火的人气
后来不知道什么时候开始在国内由盛转衰，直到现在我对这个圈子少之又少
我自己也下载了ssp并且应用了后来某位大佬复活的Taromati2人格

某次我逛逛某个博客站点时发现有个站点将伪春菜当成了看板娘
就去去搜了一下，得到的结果是：http://www.lmyoaoa.com/inn/archives/4504/
又因为这玩意已经很久没更新，所以我将这个的js、css和图片提取出来，然后魔改了一下，方便放在hexo里面
废话不多说，开始吧！

引入js和css

{blogroot}/source/weichuncai/css/style.css

#smchuncai {opacity:0.85;width:160px;height:160px;position:fixed;top:400px;left:800px;font-size:12px;}
* html #smchuncai {position:absolute;}
#chuncaiface {width:160px;height:160px;background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
/*#chuncaimenu {width:46px;line-height:16px;float:left;font-size:12px;cursor:pointer;background-color:#666;color:#FFF;text-align:center;}*/
#showchuncaimenu {float:left;text-align:left;width:100%;overflow:hidden;display:none;}
/*#showchuncaimenu ul, */#tempsaying ul {margin:1px 0px 0px 0px;padding:0px 0px 0px 5px;float:left;width:100%;line-height:16px;cursor:pointer;overflow:hidden;}
.wcc_mlist {text-align:center;width:47%;float:left;line-height:16px;margin:0;padding:0px 0px 4px 0px;cursor:pointer;overflow:hidden;}
#tempsaying ul {width:96%;}
#callchuncai {position:fixed;width:60px;line-height:16px;cursor:pointer;display:none;font-size:12px;border:1px solid #e87a73;background-color:#FFF;}
* html #callchuncai {position:absolute;}
#dialog_chat {position:absolute;top:0px;left:-205px;width:200px;line-height:23px;text-align:left;}
#dialog_chat_loading {width:200px;height:30px;background:url("../imgs/loading.gif") no-repeat center center;display:none;}
#chat_top {float:left;width:200px;height:5px;overflow:hidden;background:url("../imgs/chat_top.gif") no-repeat;}
#dialog_chat_contents, #chuncaisaying, #getmenu, #tempsaying {float:left;margin:0;padding-left:0px;width:198px;line-height:23px;background-color:#ffffee;}
#getmenu, #tempsaying,#chuncaisaying {padding:0px 0px 0px 2px; width:196px;}
#dialog_chat_contents {width:198px;border-left:1px solid #e87a73;border-right:1px solid #e87a73;}
#chat_bottom {width:200px;height:10px;float:left;background:url("../imgs/chat_bottom.gif") no-repeat;}
#chat_top, #chat_bottom {}
#tempsaying, #hiddenfaces {display:none;}
#getmenu {width:95%;height:16px;margin:0;padding:0;cursor:pointer;background:url("../imgs/menu.jpg") no-repeat top right;}
#addinput {width:240px;height:20px;position:absolute;top:150px;left:-260px;border:1px solid #888;background-color:#FFF;padding-top:2px;overflow:hidden;display:none;}
#inp_l {float:left;width:220px;height:20px;}
#inp_r {float:right;width:20px;height:20px;font-size:12px;text-align:center;cursor:pointer;}
#talk {border:none;float:left;width:180px;height:16px;}
#talkto {float:left;border:none;width:30px;height:16px;background:url("../imgs/ok.jpg");cursor:pointer;}

{blogroot}/source/weichuncai/js/common.js

var smjq = jQuery;
var _typei = 0;
var weichuncai_text = '';
smjq(document).ready(function(){
var getwidth = getCookie("historywidth");
var getheight = getCookie("historyheight");
if(getwidth != null && getheight != null){
var width = getwidth;
var height = getheight;
}else{
var width = document.documentElement.clientWidth- 200 - imagewidth;
var height = document.documentElement.clientHeight- 180 - imageheight;
}

var cwidth = document.documentElement.clientWidth-100;
var cheight = document.documentElement.clientHeight-20;
//var height = document.body.clientHeight-200;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;

smjq("body").append('<div id="smchuncai" onfocus="this.blur();" style="color:#626262;z-index:999;"><div id="chuncaiface"></div><div id="dialog_chat"><div id="chat_top"></div><div id="dialog_chat_contents"><div id="dialog_chat_loading"></div><div id="tempsaying"></div><div id="showchuncaimenu"><ul class="wcc_mlist" id="shownotice">显示公告</ul><ul class="wcc_mlist" id="chatTochuncai">聊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天</ul><ul class="wcc_mlist" id="foods">吃 零 食</ul><ul class="wcc_mlist" id="aboutmanage">关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;于</ul><ul class="wcc_mlist" id="lifetimechuncai">生存时间</ul><ul class="wcc_mlist" id="closechuncai">关闭春菜</ul></div><div><ul id="chuncaisaying"></ul></div><div id="getmenu"> </div></div><div id="chat_bottom"></div></div></div>');
smjq("#smchuncai").append('<div id="addinput"><div id="inp_l"><input id="talk" type="text" name="mastersay" value="" /> <input id="talkto" type="button" value=" " /></div><div id="inp_r"> X </div></div>');
smjq("body").append('<div id="callchuncai">召唤春菜</div>');
//判断春菜是否处于隐藏状态
var is_closechuncai = getCookie("is_closechuncai");
if(is_closechuncai == 'close'){
closechuncai_init();
}
//设置初始状态
getdata("getnotice");
setFace(1);

smjq("#smchuncai").css('left', width+'px');
smjq("#smchuncai").css('top', height+'px');
smjq("#smchuncai").css('width', imagewidth+'px');
smjq("#smchuncai").css('height', imageheight+'px');
smjq("#callchuncai").attr("style", "top:"+cheight+"px; left:"+cwidth+"px; text-align:center;");

smcc = document.getElementById("smchuncai");
smcc.onmousedown = function(){
var ent = getEvent();
moveable = true;
moveX = ent.clientX;
moveY = ent.clientY;
var obj = document.getElementById("smchuncai");
moveTop = parseInt(obj.style.top);
moveLeft = parseInt(obj.style.left);
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
window.getSelection().removeAllRanges();
}
document.onmousemove = function(){
if(moveable){
var ent = getEvent();
var x = moveLeft + ent.clientX - moveX;
var y = moveTop + ent.clientY - moveY;
var w = 200;
var h = 200;//w,h为浮层宽高
obj.style.left = x + "px";
obj.style.top = y + "px";
}
};
document.onmouseup = function(){
if(moveable){
var historywidth = obj.style.left;
var historyheight = obj.style.top;
historywidth = historywidth.replace('px', '');
historyheight = historyheight.replace('px', '');
setCookie("historywidth", historywidth, 60*60*24*30*1000);
setCookie("historyheight", historyheight, 60*60*24*30*1000);
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false; 
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
}
};
smjq("#getmenu").click(function(){
chuncaiMenu();
setFace(1);
});
smjq("#shownotice").click(function(){
getdata("getnotice");
                                setFace(1);
});
smjq("#closechuncai").click(function(){
setFace(3);
closechuncai();
});
smjq("#callchuncai").click(function(){
setFace(2);
callchuncai();
setCookie("is_closechuncai", '', 60*60*24*30*1000);
});
smjq("#shownotice").click(function(){
setFace(1);
closeChuncaiMenu();
});
smjq("#lifetimechuncai").click(function(){
closeChuncaiMenu();
closeNotice();
setFace(2);
getdata('showlifetime');
});
smjq("#chatTochuncai").click(function(){
showInput();
});
smjq("#inp_r").click(function(){
closeInput();
chuncaiSay('不聊天了吗？(→_→)');
setFace(3);
});
smjq("#talkto").click(function(){
getdata("talking");
});
smjq("#aboutmanage").click(function(){
closeChuncaiMenu();
closeNotice();
smjq("#getmenu").css("display", "none");
chuncaiSay("你想了解我主人？跟我来吧～～～");
setFace(2);
setTimeout(function(){
window.location.href = _about_path ;
}, 2000);
});
smjq("#foods").click(function(){
closeChuncaiMenu();
closeNotice();
getdata("foods");
});
/*smjq("#showchuncaimenu").hover(function(){
},function(){
smjq("#showchuncaimenu").slideUp('slow').show();
});*/
document.onmousemove = function(){
stoptime();
tol = 0;
setTime();
//chuncaiSay("啊，野生的主人出现了！ ～～～O口O");
}
talkSelf(talktime);
document.getElementById("smchuncai").onmouseover = function(){
if(talkobj){
clearTimeout(talkobj);
}
talktime = 0;
talkSelf(talktime);
}
});

function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}

var eattimes = 0;
function eatfood(obj){
var gettimes = getCookie("eattimes");
if(parseInt(gettimes) > parseInt(9)){
chuncaiSay("主人是个大混蛋！！");
setFace(3);
closechuncai_evil();
}else if(parseInt(gettimes) > parseInt(7)){
chuncaiSay(".....................肚子要炸了，死也不要再吃了～～！！！TAT");
setFace(3);
}else if(parseInt(gettimes) == parseInt(5)){
chuncaiSay("我已经吃饱了，不要再吃啦......");
setFace(3);
}else if(parseInt(gettimes) == parseInt(3)){
chuncaiSay("多谢款待，我吃饱啦～～～ ╰（￣▽￣）╭");
setFace(2);
}else{
var id = obj.replace("f",'');
getdata('eatsay', id);
}
eattimes++;
setCookie("eattimes", eattimes, 60*10*1000);
}
function chuncaiMenu(){
//smjq("#showchuncaimenu").slideDown('fast').show();
clearChuncaiSay();
closeInput();
chuncaiSay("准备做什么呢？");
smjq("#showchuncaimenu").css("display", "block");
smjq("#getmenu").css("display", "none");
smjq("#chuncaisaying").css("display", "none");
}
function closeChuncaiMenu(){
clearChuncaiSay();
smjq("#showchuncaimenu").css("display", "none");
//smjq("#chuncaisaying").css("display", "block");
showNotice();
smjq("#getmenu").css("display", "block");
}
function showNotice(){
smjq("#chuncaisaying").css("display", "block");
}
function closechuncai(){
stopTalkSelf();
chuncaiSay("记得再叫我出来哦...");
smjq("#showchuncaimenu").css("display", "none");
setTimeout(function(){
smjq("#smchuncai").fadeOut(1200);
smjq("#callchuncai").css("display", "block");}, 2000);
//保存关闭状态的春菜
setCookie("is_closechuncai", 'close', 60*60*24*30*1000);
}
function closechuncai_evil(){
stopTalkSelf();
smjq("#showchuncaimenu").css("display", "none");
setTimeout(function(){
smjq("#smchuncai").fadeOut(1200);
smjq("#callchuncai").css("display", "block");}, 2000);
}
function closechuncai_init(){
stopTalkSelf();
smjq("#showchuncaimenu").css("display", "none");
setTimeout(function(){
smjq("#smchuncai").css("display", "none");
smjq("#callchuncai").css("display", "block");}, 30);
}
function callchuncai(){
talkSelf(talktime);
smjq("#smchuncai").fadeIn('normal');
smjq("#callchuncai").css("display", "none");
closeChuncaiMenu();
closeNotice();
chuncaiSay("我回来啦～");
setCookie("is_closechuncai", '', 60*60*24*30*1000);
}

function chuncaiSay(s){
clearChuncaiSay();
smjq("#tempsaying").append(s);
smjq("#tempsaying").css("display", "block");
weichuncai_text = s;
typeWords();
}
function clearChuncaiSay(){
document.getElementById("tempsaying").innerHTML = '';
}
function closeNotice(){
smjq("#chuncaisaying").css("display", "none");
}
function showInput(){
closeChuncaiMenu();
closeNotice();
chuncaiSay("............?");
//setFace(1);
smjq("#addinput").css("display", "block");
}
function closeInput(){
setFace(3);
smjq("#addinput").css("display", "none");
}
function clearInput(){
document.getElementById("talk").value = '';
}
function createFace(a, b, c){
smjq("head").append('<div id="hiddenfaces"><img id="hf1" src="'+a+'" /><img id="hf2" src="'+b+'" /><img id="hf3" src="'+c+'" /></div>');
setFace(1);
}
function setFace(num){
obj = document.getElementById("hf"+num).src;
smjq("#chuncaiface").attr("style", "background:url("+obj+") no-repeat scroll 50% 0% transparent; width:"+imagewidth+"px;height:"+imageheight+"px;");
}
function getdata(el, id){
smjq.ajax({
type:'GET',
url:_weichuncai_jsonpath,
cache:'false',
dataType: 'html',
contentType: 'application/json; charset=utf8',
beforeSend: function(){
//smjq("#dialog_chat").fadeOut("normal");
smjq("#tempsaying").css('display', "none");
smjq("#dialog_chat_loading").fadeIn("normal");
},
success: function(data){
smjq("#dialog_chat_loading").css('display', "none");
//smjq("#dialog_chat").fadeIn("normal");
smjq("#tempsaying").css('display', "");
var dat = eval("("+data+")");
            if(el == 'getnotice'){
chuncaiSay(dat.notice);
setFace(1);
}else if(el == 'showlifetime'){
BirthDay=new Date(dat.showlifetime);//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
chuncaiSay("我已经与主人 一起生存了 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分钟 "+seconds+" 秒的快乐时光啦～*^_^*");
}else if(el == 'talking'){
var talkcon = smjq("#talk").val();
var i = in_array(talkcon, dat.ques);
var types = typeof(i);
if(types != 'boolean'){
chuncaiSay(dat.ans[i]);
setFace(2);
}else{
chuncaiSay('.......................嗯？');
setFace(3);
}
clearInput();
}else if(el == 'foods'){
var str='';
var arr = dat.foods;
var preg = /function/;
for(var i in arr){
if(arr[i] != '' && !preg.test(arr[i]) ){
str +='<ul id="f'+i+'" class="eatfood" onclick="eatfood(this.id)">'+arr[i]+'</ul>';
}
}
chuncaiSay(str);
}else if(el = "eatsay"){
var str = dat.eatsay[id];
chuncaiSay(str);
setFace(2);
}else if(el = "talkself"){
var arr = dat.talkself;
return arr;
}
},
error: function(){
chuncaiSay('好像出错了，是什么错误呢...请联系管理猿');
}
});
}

function in_array(str, arr){
for(var i in arr){
if(arr[i] == str){
return i;
}
}
return false;
}

var timenum;
var tol=0;
//10分钟后页面没有响应就停止活动
var goal = 10*60;
function setTime(){
tol++;
//document.body.innerHTML(tol);
timenum = window.setTimeout("setTime('"+tol+"')", 1000);
if(parseInt(tol) == parseInt(goal)){
stopTalkSelf();
closeChuncaiMenu();
closeNotice();
closeInput();
chuncaiSay("主人跑到哪里去了呢....");
setFace(3);
stoptime();
}
}
function stoptime(){
if(timenum){
clearTimeout(timenum);
}
}
var talktime = 0;
//设置自言自语频率（单位：秒）
var talkself = 60;
var talkobj;
var tsi = 0;
var talkself_arr = [
["白日依山尽，黄河入海流，欲穷千里目，更上.....一层楼？", "1"],
["我看见主人熊猫眼又加重了！", "3"],
["我是不是很厉害呀～～？", "2"],
["5555...昨天有个小孩子跟我抢棒棒糖吃.....", "3"],
["昨天我好像看见主人又在众人之前卖萌了哦～", "2"]
];

function talkSelf(talktime){
talktime++;
var yushu = talktime%talkself;
if(parseInt(yushu) == parseInt(9)){
closeChuncaiMenu();
closeNotice();
closeInput();
tsi = Math.floor(Math.random() * talkself_arr.length + 1)-1;
chuncaiSay(talkself_arr[tsi][0]);
setFace(talkself_arr[tsi][1]);
}
talkobj = window.setTimeout("talkSelf("+talktime+")", 1000);
}
function stopTalkSelf(){
if(talkobj){
clearTimeout(talkobj);
}
}
function arrayShuffle(arr){
var result = [],
len = arr.length;
while(len--){
result[result.length] = arr.splice(Math.floor(Math.random()*(len+1)),1);
}
return result;
}


function typeWords() {
var p = 1;
var str = weichuncai_text.substr(0,_typei);
var w = weichuncai_text.substr(_typei,1);
if(w=="<"){
str += weichuncai_text.substr(_typei,weichuncai_text.substr(_typei).indexOf(">")+1);
p= weichuncai_text.substr(_typei).indexOf(">")+1;
}
_typei+=p;
document.getElementById("tempsaying").innerHTML = str;
txtst = setTimeout("typeWords()",20);
if (_typei> weichuncai_text.length){
clearTimeout(txtst);
_typei = 0;
}
}

function setCookie(name, val, ex){
var times = new Date();
times.setTime(times.getTime() + ex);
if(ex == 0){
document.cookie = name+"="+val+";";
}else{
document.cookie = name+"="+val+"; expires="+times.toGMTString();
}
}

function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));   
if(arr != null) return unescape(arr[2]); return null;
}

{blogroot}/source/weichuncai/js/chuncai.json（这个地方可以自行配置）

{
    "notice": "欢迎来到我的新家，没想到在2024我会被人注意到，真幸福~~",
    "ques": [
        "早上好",
        "中午好",
        "下午好",
        "晚上好",
        "晚安"
    ],
    "ans": [
        "早上好～",
        "中午好～",
        "下午好～",
        "晚上好～",
        "晚安～"
    ],
    "foods": [
        "金坷垃",
        "咸梅干"
    ],
    "eatsay": [
        "吃了金坷垃，一刀能秒一万八～！",
        "吃咸梅干，变超人！哦耶～～～"
    ],
    "showlifetime":"02-16-2024 15:30:00"
}

{blogroot}/source/weichuncai/js/chuncai.json（这个地方可以自行配置）

var _about_path = "https://blog.sinzmise.top/about"; //你的关于页面地址
var _weichuncai_jsonpath = "/weichuncai/chuncai.json"; //chuncai.json的位置
var imagewidth = '85'; //人格长度
var imageheight = '152'; //人格高度
//设置人格的自言自语，前面的双引号是内容后面的双引号是人格表情，后面的1、2、3对应createFace设置的第几个表情
var talkself_arr = [
  ["白日依山尽，黄河入海流，欲穷千里目，更上.....一层楼？", "1"],
  ["我看见主人熊猫眼又加重了！", "3"],
  ["我是不是很厉害呀～～？", "2"],
  ["5555...昨天有个小孩子跟我抢棒棒糖吃.....", "3"]
];
//设置表情
createFace(
  "https://dqapi.sininno.eu.org/weichuncai/skin/rakutori/face1.gif", 
  "https://dqapi.sininno.eu.org/weichuncai/skin/rakutori/face2.gif", 
  "https://dqapi.sininno.eu.org/weichuncai/skin/rakutori/face3.gif"
);

butterfly、anzhiyu主题引入：

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # jQuery（必须在之前引入）
    - <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  bottom:
    # 主体
    - <link rel="stylesheet" type="text/css" href="/weichuncai/css/style.css">
    - <script src="/weichuncai/js/common.js"></script>
    - <script src="/weichuncai/wcc-config.js"></script>

后记

我为什么会将伪春菜定义为桌面精灵而不是桌宠？
是因为相比于桌宠来说，伪春菜比桌宠的功能还多得多
因此我即使开着虚拟桌宠模拟器，我有时也会开着伪春菜
ssp_OgKZgUjISo
（甚至我电脑卡的时候也会提醒我，虽然我电脑没有卡死QWQ）

还有，我之前看关于Kikka这篇文章，有一句话很吸引我：
msedge_h7th45Tk9U
也据此可以看出，在2020年，伪春菜这个圈子越来越难活下去
更何况现在是2024。。。。。。

但不管怎么说，还是有人在用这个桌面精灵的，至少有我一个。。。。。。
后面我打算写个有关伪春菜的配置教程吧。。。。。。

汐塔魔法屋
为博客添加一个游戏收藏页（npm插件版）王九弦SZ·Ninty
前言之前看到Kouseki大佬的这篇文章：为博客添加一个游戏收藏页我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失思来想去，我还是决定做npm版本的游戏收藏页效果效果预览安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-games --save添加配置信息，以下为写法示例在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 123456789101112131415161718192021222324252627282930313233343536# Game Page# see https://akilar.top/posts/e2d3c450/games: enable: true name: 游戏世界 description: 我的游戏世界 tip: 跟小屋屋主一起探索世界 top_background: https://th.bing.com/th/id/R.13a97ef4830efa5
2024年1月19日 05:39
- 分享
- Email
- archive.is
- Twitter
❌

为博客添加一个游戏收藏页（npm插件版）

汐塔魔法屋

作者王九弦SZ·Ninty

2024年1月19日 05:39

前言

之前看到Kouseki大佬的这篇文章：

为博客添加一个游戏收藏页

我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失
思来想去，我还是决定做npm版本的游戏收藏页

效果

安装

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

1	npm install hexo-butterfly-games --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

# Game Page
# see https://akilar.top/posts/e2d3c450/
games:
  enable: true
  name: 游戏世界 
  description: 我的游戏世界 
  tip: 跟 小屋屋主 一起探索世界 
  top_background: https://th.bing.com/th/id/R.13a97ef4830efa5e0b87134d622719f3?rik=G7RaJFpxg5PtkA&riu=http%3a%2f%2fupload.techweb.com.cn%2fs%2f640%2f2019%2f0530%2f1559208230699.jpg&ehk=j1G8rMX98TRX52EkLgI5jW1p7lIQp4I8Si1nqEggFRs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1
  buttonText: Steam 
  buttonLink: https://steamcommunity.com/
  css: https://jsd.cdn.storisinz.site/npm/hexo-butterfly-games/lib/games.css
  good_games:
    - title: 风景一绝
      description: 不会错过的风景
      games_list:
        - name: 怪物猎人：世界
          specification: CAPCOM Co., Ltd.
          description: "在新建构的「Monster Hunter: World」中, 可以体验到你一直期盼的极致猎人生活。"
          image: https://cdn.max-c.com/heybox/dailynews/img/94376ca41326836587a137d5999733e5.jpg
          link: https://www.xiaoheihe.cn/games/detail/582010

    - title: 我的最爱
      description: 我不能没有它了
      games_list:
        - name: GTA:5
          specification: Rockstar Games
          description: 谁还在买GTA5
          image: https://imgheybox.max-c.com/heybox/game/header/271590_dXCCk.jpg
          link: https://www.xiaoheihe.cn/games/detail/271590
  path: games
  front_matter: #【可选】games页面的 front_matter 配置
    title: 游戏人生
    comments: true
    top_img: false
    type: games
    aside: false

参数释义

参数	备选值/类型	释义
enable	true/false	控制开关
name	text	顶部标题
description	text	顶部副标题
tip	text	顶部小标题
top_background	URL	顶部背景链接
buttonText	text	按钮文字
buttonLink	URL	按钮对应链接
good_games.title	text	分类标题
good_games.description	text	分类副标题
good_games.games_list.name	text	游戏名字
good_games.games_list.specification	text	游戏产商
good_games.games_list.description	text	游戏简介
good_games.games_list.image	URL	游戏图片链接
good_games.games_list.link	URL	游戏对应链接
css	URL	【可选】开发者接口，自定义css链接
path	comments	【可选】games 的路径名称。默认为 games，生成的页面为 games/index.html
front_matter	object	【可选】games 页面的 front_matter 配置,写法见上文示例

汐塔魔法屋
自建不蒜子API王九弦SZ·Ninty
前言不蒜子是一款很好用的前端计数工具，但是因为流量日渐变多，经常会出现 502 的情况于是就找到了soxft/busuanzi，然后用docker成功在Koyeb上部署不蒜子但是由于这个不蒜子没有Web 管理面板，而如果之前使用的是其他程序统计访问量，切换到使用 busuanzi 来统计，就需要修改访问量所以我基于yuantuo666/busuanzi这个版本的不蒜子魔改，然后将其部署到docker和ghcr里面然后这个教程就诞生了（bushiKoyeb部署Redis数据库这个不蒜子默认用的Redis数据库，这边推荐upstash直接注册个账号然后新建个项目复制这里面的数据库地址（后面的“:”和端口要复制下来！）和密码正式开始部署老样子，注册个koyeb账号注册koyeb账号必须开t才没有银行卡验证的选项(注册过koyeb账号且没有部署项目就不用这个步骤)然后再新建个Web Service选择dockerimage填写docker.io/szninty/busuanzi:houtai或者ghcr.io/SinzMise/busuanzi划到下面，点击Advanced，添加环境变量Nam
2024年1月12日 03:52
- 分享
- Email
- archive.is
- Twitter
❌

自建不蒜子API

汐塔魔法屋

作者王九弦SZ·Ninty

2024年1月12日 03:52

前言

不蒜子是一款很好用的前端计数工具，但是因为流量日渐变多，经常会出现 502 的情况
于是就找到了soxft/busuanzi，然后用docker成功在Koyeb上部署不蒜子
但是由于这个不蒜子没有Web 管理面板，而如果之前使用的是其他程序统计访问量，切换到使用 busuanzi 来统计，就需要修改访问量
所以我基于yuantuo666/busuanzi这个版本的不蒜子魔改，然后将其部署到docker和ghcr里面
然后这个教程就诞生了（bushi

Koyeb部署

Redis数据库

这个不蒜子默认用的Redis数据库，这边推荐upstash
直接注册个账号然后新建个项目

复制这里面的数据库地址（后面的“:”和端口要复制下来！）和密码

正式开始部署

老样子，注册个koyeb账号
注册koyeb账号必须开t才没有银行卡验证的选项
(注册过koyeb账号且没有部署项目就不用这个步骤)
然后再新建个Web Service

选择docker

image填写docker.io/szninty/busuanzi:houtai或者ghcr.io/SinzMise/busuanzi

划到下面，点击Advanced，添加环境变量

Name	Value	必选
API_SERVER	busuanzi.js API地址需要转译	√
REDIS_ADDR	Redis 数据库地址（带端口）	√
REDIS_PWD	Redis 密码	√
JWT_SECRET	JWT加密秘钥，可乱填	√
ADMIN_PASSWORD	后台管理密码	√
LOG_ENABLE	是否开启日志，默认 true
下面的port改为`8080`
准备好了之后可以点击deploy，等一会就可以体验到不蒜子了