CorePress主题美化教程

美化教程（最后更新2023/8/14）

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #409EFF;
    background-image: -webkit-linear-gradient(
45deg
,hsla(0,0%,100%,.2) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 75%,transparent 0,transparent);
}

LOGO美化

看着单调的LOGO看腻了

于是乎搞了一个扫光特效，看着就高大上很多了

/*扫光开始*/
.header-logo {position:relative;float:left;margin-right:10px;padding:5px 0;overflow: hidden;}
.header-logo  a:before{
content:"";
position: absolute;
left: -665px;
top: -460px;
width: 200px;
height: 15px;
background-color: rgba(255,255,255,.5);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);/*角度倾斜45*/
-webkit-animation: searchLights 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 2s ease-in 2s infinite;/*光扫过去的时间，自己修改，可以加快*/}
@-webkit-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
/*扫光结束*/

手机页面侧边导航栏美化

默认的侧边导航栏有点单调，可以用以下css代码进行美化一下

/*侧边导航栏背景颜色*/
.drawer-menu-list {
    position: relative;
    flex: 70%;
    max-width: 400px;
    background: #ffffffba;
    overflow-y: auto;
}
/*侧边导航栏条框*/
.menu-mobile .menu-item a {
    display: block;
    color: #4e5358;
    font-size: 14px;
    padding: 10px;
    margin: 4px 2px 4px 2px;
    border-radius: 1rem;
    border: 1px solid rgb(125 191 255 / 80%);
}
/*侧边导航栏向下拉选项*/
.menu-mobile .mobile-m-dropdown {
    position: absolute;
    right: 1rem;
    top: 0;
    width: 48px;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    background: rgba(136, 173, 255, 0.88);
    border-radius: 8px;
    padding: 0px 12px;
    margin: 2px 0px 0px;
}

文章底部彩色标签

/** 文章底部彩色标签 */
.post-tags{margin-bottom: 10px}
.post-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;font-weight:bold;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 10px;display: inline-block}
.post-tags a:nth-child(5n){background-color: #6022c3;color: #FFF}
.post-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}
.post-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}
.post-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}
.post-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}
.post-tags a:hover{background-color: #1B1B1B;color: #FFF}