博客园皮肤切换

使用模板-geek

页面定制 CSS 代码

#loading {
    background: #151728;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
}

#load {
    position: absolute;
    width: 600px;
    height: 36px;
    left: 50%;
    top: 40%;
    margin-left: -300px;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

#load div {
    position: absolute;
    width: 20px;
    height: 36px;
    opacity: 0;
    font-family: Helvetica, Arial, sans-serif;
    animation: move 2s linear infinite;
    -o-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-animation: move 2s linear infinite;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    color: #35c4f0;
}

#load div:nth-child(2) {
    animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#load div:nth-child(3) {
    animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}
#load div:nth-child(4) {
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
#load div:nth-child(5) {
    animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
#load div:nth-child(6) {
    animation-delay: 1s;
    -o-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
#load div:nth-child(7) {
    animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
}

@keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    35% {
        left: 41%;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    65% {
        left: 59%;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        left: 100%;
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

@-moz-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    35% {
        left: 41%;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    65% {
        left: 59%;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        left: 100%;
        -moz-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

@-webkit-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    35% {
        left: 41%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    65% {
        left: 59%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        left: 100%;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

@-o-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }
    35% {
        left: 41%;
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    65% {
        left: 59%;
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        left: 100%;
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

博客侧边栏公告

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
    // 基本配置
    theme: {
        name: 'geek',
        color: '#368BF2',
        title: '',
        avatar: 'https://s3.ax1x.com/2021/03/15/6BHu26.jpg',
        favicon: 'https://s3.ax1x.com/2021/03/15/6DQX5D.png',
        headerBackground: 'https://s3.ax1x.com/2021/03/15/6Bz0sI.png',
    },
    // 代码高亮
    highLight: {
        type: '',
        dark: 'atomOneDark',
        light: 'atomOneLight',
    },
    // 代码行号
    lineNumbers: {
        enable: true,
    },
    // github图标
    github: {
        enable: true,
        color: '#ffb3cc',
        url: 'https://github.com/Fulingx',
    },
    // 码云图标
    gitee: {
        enable: true,
        color: '#C71D23',
        url: 'https://s3.ax1x.com/2021/03/15/6BHu26.jpg',
    },
    // 图片灯箱
    imagebox: {
        enable: true,
    },
    // 文章目录
    catalog: {
        enable: true,
        position: 'left',
    },
    // 点击特效
    click: {
        enable: false,
        auto: false,
        colors: [],
        size: 30,
        maxCount: 15,
    },
    // 评论输入框表情
    emoji: {
        enable: true,
        showRecents: true,
        showSearch: true,
        showPreview: false,
        recentsCount: 20,
        theme: 'auto',
    },
    // 暗色模式
    darkMode: {
        enable: true,
        autoDark: false,
        autoLight: false,
    },
    // 音乐播放器
    musicPlayer: {
        enable: false,
        page: 'all',
        agent: 'pc',
        autoplay: false,
        volume: 0.4,
        lrc: {
            enable: false, // 启用歌词
            type: 1, // 1 -> 字符串歌词 3 -> url 歌词
            color: '', // 颜色
        },
        audio: [
            {
                name: '404 not found',
                artist: 'REOL',
                url:
                    'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',
                cover:
                    'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',
                lrc: ``,
            },
        ],
    },
    // 个性签名<font color=fffffb><font size=4>愿所有梦见过远方的人，心有惊雷，生似静湖。</font></font>
    signature: {
        enable: true,
        contents: [
"<b>System.out.println(😎);</b></br></br></br></br>"

     ],
    },
    // 弹出公告
    notice: {
        enable: false,
        text: [ "<b>🍺欢迎来到浮零的小窝🍺</b>"],
    },
    // 随笔页尾部签名
    postSignature: {
        enable: false,
        content: [],
        licenseName: '',
        licenseLink: '',
    },
    // 自定义链接链接
    links: [
        {
            name: '📑fuling-github',
            link: 'https://www.cnblogs.com/fulingx',
        },
       {
            name: '☕fuling-gitee',
            link: 'https://www.cnblogs.com/fulingx',
        },
 {
            name: '🌐fuling-doc',
            link: 'https://www.cnblogs.com/fulingx',
        },
    ],
})
</script>

页首 HTML 代码

<div id="loading">
  <div id="load">
    <div>G</div>
    <div>N</div>
    <div>I</div>
    <div>D</div>
    <div>A</div>
    <div>O</div>
    <div>L</div>
  </div>
</div>