• 我保存一份博客园样式代码


    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>
  • 相关阅读:
    非递归实现二叉树先序、中序和后序遍历
    领益科技:Windows Server 2012 R2 强制卸载域控制器
    Zabbix调优不完全指南(https://www.jianshu.com/p/2d911d55448f)
    Linux下基础查看命令
    Linux下的快捷键
    给Linux系统新增加一块硬盘
    领益智造:Windows中的备份和还原
    领益智造:AD中修改OU下面用户的属性
    领益科技:AD中批量创建域用户(创建Mac地址账号)
    Linux常见企业面试题
  • 原文地址:https://www.cnblogs.com/gongwangwang/p/13894600.html
Copyright © 2020-2023  润新知