wordpress美化教程

滚动条美化

我看到呢，总感觉网站的滚动条太单调了,也许是我看多了吧，觉得不怎么好看。

于是乎，搞了一个美化，看着好多了，至于滚动条是什么就不用我说了吧。

把以下代码加到网站全局style.css 里面就可以了

::-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:before {
content: "";
position: absolute;
width: 110px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);/*角度倾斜45*/
-webkit-animation: blink 1.5s ease-in 1s infinite;/*光扫过去的时间，自己修改，可以加快*/
}
@-webkit-keyframes blink {
from {
left: 10px;
top: 0;
}
top {
left: 320px;
top: 0;
}
}
@-o-keyframes blink {
from {
left: 10px;
top: 0;
}
top {
left: 320px;
top: 0;
}
}
@-moz-keyframes blink {
from {
left: 10px;
top: 0;
}
top {
left: 320px;
top: 0;
}
}
@keyframes blink {
from {
left: -100px;
top: 0;
}
top {
left: 320px;
top: 0;
}
}

LOGO父级寻找

拿作者的网站来说

这样就找到了父级，就可以进行设置了