博客园美化-好害羞版

模版主题： Custom

首页定制css代码

 1 :root{--sk-size:60px;--sk-color:#ffb3cc}
 2 #home{display:none}
 3 #loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url();z-index:99999}
 4 .sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}
 5 .sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}
 6 .sk-fold-cube:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}
 7 .sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}
 8 .sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}
 9 .sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}
10 .sk-fold-cube:nth-child(2):before{animation-delay:.3s}
11 .sk-fold-cube:nth-child(4):before{animation-delay:.6s}
12 .sk-fold-cube:nth-child(3):before{animation-delay:.9s}
13 @keyframes sk-fold{
14 0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}
15 25%,75%{transform:perspective(140px) rotateX(0);opacity:1}
16 100%,90%{transform:perspective(140px) rotateY(180deg);opacity:0}}

特别注意：禁用模板默认CSS >>>打上勾

博客侧边栏公告（支持HTML代码） （支持 JS 代码）// js权限需要申请

 1 <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
 2 <script>$.awesCnb({
 3 theme: {
 4 name: 'acg', // 在这里配置全局主题:'acg' 'gshang' 'light' 'reacg'
 5 color:"deeppink", // 全局主题颜色
 6 headerBackground: "http://bbsimg.ubgame.com/data/attachment/forum/201610/25/211052a4yy8h558eh2ak7j.jpg", //顶部背景图片地址
 7 avatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581437543522&di=b6dedec1059c0235e3fc3af9b0cdd10c&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201208%2F18%2F20120818131753_UMLNw.thumb.700_0.jpeg", //头像地址
 8 },
 9 
10 });
11 </script>

首页HTML代码

1 <section id="loading">
2   <div class="sk-fold">
3     <div class="sk-fold-cube"></div>
4     <div class="sk-fold-cube"></div>
5     <div class="sk-fold-cube"></div>
6     <div class="sk-fold-cube"></div>
7   </div>
8 </section>