1,博客皮肤选择Custom
2,页面定制css(勾选禁用默认CSS)复制下面一段粘贴到代码框
:root{--sk-size:60px;--sk-color:#ffb3cc} #loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(https://guangzan.gitee.io/awescnb/assets/images/background/cell.gif);z-index:99999} .sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)} .sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)} .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%} .sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)} .sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)} .sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)} .sk-fold-cube:nth-child(2):before{animation-delay:.3s} .sk-fold-cube:nth-child(4):before{animation-delay:.6s} .sk-fold-cube:nth-child(3):before{animation-delay:.9s} @keyframes sk-fold{ 0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0} 25%,75%{transform:perspective(140px) rotateX(0);opacity:1} 100%,90%{transform:perspective(140px) rotateY(180deg);opacity:0}}
3,博客侧边栏公告(支持HTML代码) (支持 JS 代码)
<script src="https://guangzan.gitee.io/awescnb/index.js"></script> <script>$.awesCnb({ // 在这里配置主题,什么都不写即代表使用默认配置 // 就这样什么都不写也能跑起来 }); </script>
4,页首 HTML 代码
<section id="loading"> <div class="sk-fold"> <div class="sk-fold-cube"></div> <div class="sk-fold-cube"></div> <div class="sk-fold-cube"></div> <div class="sk-fold-cube"></div> </div> </section>
5、页脚 HTML 代码
<!--放大图片--> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script> <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script> <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script> <!--放大图片end--> <!--鼠标特效--> <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas> <!--鼠标特效 end--> <!--雪花特效1&12月自动添加--> <div class="Snow"> <canvas id="Snow"></canvas> </div> <script src="https://blog-static.cnblogs.com/files/zouwangblog/xue.js"></script> <!--顶部加载条--> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.css"> <script src="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.js"></script> <script> NProgress.start(); NProgress.done(); </script>