设计精美的博客园皮肤

最新推荐文章于 2024-07-19 16:52:45 发布

CC城子

最新推荐文章于 2024-07-19 16:52:45 发布

阅读量1.1k

点赞数 4

分类专栏：杂记文章标签： css3 html js less animation

本文链接：https://blog.csdn.net/weixin_44419248/article/details/115886952

版权

杂记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.为了使设计的博客园不出问题需要将博客园选项中的侧边栏控件-公告勾选

2.在设置里的CSS代码中输入博主的设置，勾选禁用模板默认CSS

@keyframes spin3D {
    from {
        transform: rotate3d(0.5, 0.5, 0.5, 360deg);
    }
    to {
        transform: rotate3d(0deg);
    }
}
#loading {
    height: 100%;
    background-color: #1d2630;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 99999999;
}
.spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.leo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.blue-orbit {
    width: 165px;
    height: 165px;
    border: 1px solid #91daffa5;
    animation: spin3D 3s linear 0.2s infinite;
}
.green-orbit {
    width: 120px;
    height: 120px;
    border: 1px solid #91ffbfa5;
    animation: spin3D 2s linear 0s infinite;
}
.red-orbit {
    width: 90px;
    height: 90px;
    border: 1px solid #ffca91a5;
    animation: spin3D 1s linear 0s infinite;
}
.white-orbit {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    animation: spin3D 10s linear 0s infinite;
}
.w1 {
    transform: rotate3D(1, 1, 1, 90deg);
}
.w2 {
    transform: rotate3D(1, 2, 0.5, 90deg);
}
.w3 {
    transform: rotate3D(0.5, 1, 2, 90deg);
}

3.在博客园侧边栏公告(支持HTML代码)输入下面代码

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    theme: {
      name: 'bilibili',
     
      avatar: 'https://pic.cnblogs.com/avatar/2165871/20210221123040.png',
       headerBackground: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3095378330,1432941088&fm=26&gp=0.jpg',
      
   },
 
   signature: {
    enable: true,
    contents: [
   "你好",
    ],
},  

    tools: {
        enable: true,
        initialOpen: true,
        draggable: false,
    },

notice:{
    enable:true,
    text:['你好'],
},

lock: {
    enable: true,
    background: 'https://pic.cnblogs.com/avatar/2165871/20210221123040.png',
    strings: [
        '<i>Powered by</i> webpack.',
        '&amp; Theme in awescnb',
        '你好',
    ],
 
},

github: {
    enable: true,
    color: '#ffb3cc',
    url: ' https://github.com/changcheng-chii',
},

gitee: {
    enable: true,
    color: '#C71D23',
    url: 'https://gitee.com/changchengchi',
},
highLight: {
    dark: 'atomOneDark',
    light: 'atomOneLight',
},
lineNumbers: {
    enable: true,
},

catalog: {
    enable: true,
    position: 'left',
},
topProgress: {
        enable: true,
        page: 'all',
        agent: 'pc',
        background: '#FFB3CC',
        height: '5px',
    },
darkMode: {
    enable: true,
    autoDark: false,
    autoLight: true,
},
click: {
    enable: false,
    auto: false,
    colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
    size: 30,
    maxCount: 50,
},
live2d: {
    enable: false,
    page: 'all',
    agent: 'pc',
    model: 'tororo',
    width: 150,
    height: 200,
    position: 'left',
    gap: 'default',
},



  })
</script>

4.在首页的HTML代码中输入下面代码

<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit w1 leo"></div>
        <div class="white-orbit w2 leo"></div>
        <div class="white-orbit w3 leo"></div>
    </div>
</div>

5.保存即可得到如下博客园皮肤，其中修改侧边栏公告代码中的name更换自己喜欢的款式，其中name的款式有; “csdn” , "reacg", "bilibili" , "geek" ,"simple"