博客美化主题3

博客美化3

CSS

\#loading{background:#000;background:radial-gradient(#222,#000);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:99999}.loader-inner{bottom:0;height:60px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap{animation:spin 2s cubic-bezier(0.175,0.885,0.32,1.275) infinite;box-sizing:border-box;height:50px;left:0;overflow:hidden;position:absolute;top:0;transform-origin:50% 100%;width:100px}.loader-line{border:4px solid transparent;border-radius:100%;box-sizing:border-box;height:100px;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap:nth-child(1){animation-delay:-50ms}.loader-line-wrap:nth-child(2){animation-delay:-0.1s}.loader-line-wrap:nth-child(3){animation-delay:-150ms}.loader-line-wrap:nth-child(4){animation-delay:-0.2s}.loader-line-wrap:nth-child(5){animation-delay:-250ms}.loader-line-wrap:nth-child(1) .loader-line{border-color:#ea4747;height:90px;width:90px;top:7px}.loader-line-wrap:nth-child(2) .loader-line{border-color:#eaea47;height:76px;width:76px;top:14px}.loader-line-wrap:nth-child(3) .loader-line{border-color:#47ea47;height:62px;width:62px;top:21px}.loader-line-wrap:nth-child(4) .loader-line{border-color:#47eaea;height:48px;width:48px;top:28px}.loader-line-wrap:nth-child(5) .loader-line{border-color:#4747ea;height:34px;width:34px;top:35px}@keyframes spin{0%,15%{transform:rotate(0)}100%{transform:rotate(360deg)}}

侧边栏

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        blogIcon: 'https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg', //请自己添加一个图片链接，如果不需要的话可以删掉
        name: '傻鱼Hh', // 用户名
        startDate: '2020-7-12', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: 'https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg', // 用户头像，请自己添加一个图片链接
      },
    
    }
</script>

页首

<div id="loading">
    <div class="loader-inner">
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
    </div>
</div>

页脚

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    theme: {
      name: 'geek',
      color: '#808080',
      title: '傻鱼Hh',
      avatar: 'https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg',
      favicon: '',
      headerBackground: 'https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg',
    },
    live2d: {
      enable: true,
      model: 'haru-01',
    },

  $.awesCnb(opts)
</script>

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const config = {
    theme: {
      name: 'geek',
      color: '#708090',
      title: '傻鱼Hh',
      avatar: 'https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg',
      favicon: '',
      headerBackground: 'https://pic.imgdb.cn/item/62d73f13f54cd3f93797d723.jpg',
    },
    github: {
    enable: true,
    color: '#ffb3cc',
    url: 'https://github.com/huaziqi',
},
    live2d: {
      enable: true,
      model: 'haru-01',
    },
    signature: {
      enable: true,
      contents: ["心如止水"],
    },
        // 点击特效
    click: {
      enable: true,
    },
    // 首页列表图
    indexListImg: {
      enable: true,
    },
  }
  $.awesCnb(config)
</script>