Hexo搭建butterfly博客---（三）加载动画

预览地址

https://blog.ffing.fun

加载动画效果

当页面加载过慢时，使用加载动画做个延迟过渡，提高一下用户体验。

参考博主：安知鱼

上图：上面的胶囊css和中间的gif加载动画

• 1.修改《博客目录》/_config.butterfly.yml，配置加载动画项
• 2.修改《博客目录》/theme/butterfly/layout/incloudes/loading/index.pug增加判断
• 3.添加胶囊css文件，《博客目录》/source/loading_bar.css
• 4.添加加载动图css文件，《博客目录》/source/loading_gif.css
• 5.《博客目录》/themes/butterfly/source/css/_layout/loading.styl，实现全图中间的gif图片样式
• 6.《博客目录》/_config.butterfly.yml中引入css文件
• 7.三连

一，修改《博客目录》/_config.butterfly.yml，配置加载动画项

修改一下内容：

# Loading Animation (加載動畫)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/loading_bar.css

二，《博客目录》/theme/butterfly/layout/incloudes/loading/index.pug增加判断

直接替换文件内容，为第一步判断使用，当“source: 值”，不等于1或2，将启用两个加载动画

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

三，添加胶囊css文件，《博客目录》/source/loading_bar.css

创建loading_bar.css文件，贴入下面文件

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 4rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden;
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: 0.3s ease-in;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

四，添加加载动图css文件，《博客目录》/source/loading_gif.css

创建loading_gif.css文件，贴入下面文件

注：url中的gif是博主的加载动图片，如果想更换图片，可以替换为自己的图片地址

.loading-img {
    background: url(https://src.ffing.cn/hexo/img/loading_color.gif) no-repeat center center;
    background-size: cover;
  }

五，《博客目录》/themes/butterfly/source/css/_layout/loading.styl，实现全图中间的gif图片样式

loading.styl修改了部分样式，可直接替换文件

if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--anzhiyu-card-bg);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 400px;
      height: 400px;
      border-radius: 50%;
      margin: auto;
      border: 0px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;

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

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

六，《博客目录》/_config.butterfly.yml中引入css文件

修改_config.butterfly.yml，引入加载css文件

注：yml文件需要注意缩减问题

inject:
  head:
    #加载动画
    - <link rel="stylesheet" href="/css/loading_gif.css">   

七，三连

必须在博客目录下方可三连

#进入你的博客目录
cd 《博客目录》
#三连
hexo cl&&hexo g&&hexo s