右侧滚动条按钮美化
把下面的代码复制,粘贴到:后台→外观→主题选项→定制风格→自定义样式
#scroll {
width: 32px;
float: rightright;
position: fixed;
rightright: 10px;
bottombottom: 50px;
z-index: 9999;
}
#scroll li a {
font-size: 16px;
color: #fff;
width: 32px;
height: 32px;
line-height: 28px;
text-align: center;
vertical-align: middle;
margin-top: 4px;
display: block;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 15px;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
#scroll li a:hover {
background: #2f889a;
color: #fff;
border: 1px solid #2f889a;
transition: all .2s ease-in 0s;
}
.scroll-h {
background-color: #ff5e5c !important;
}
.scroll-c {
background-color: #24a5db !important;
}
.scroll-b {
background-color: #ff9531 !important;
}
#gb2big5 {
background-color: #aec534 !important;
}
.qr {
background-color: #4a4a4a !important;
}
.qqonline a {
background: #e6af1345!important;
}
@media screen and (min-width:900px) {
#scroll li a:hover {
background: #2f889a;
color: #fff;
border: 1px solid #2f889a;
transition: all 0.2s ease-in 0s;
}
}
.qr-img {
position: fixed;
background: #fff;
bottombottom: 50px;
rightright: 50px;
max-width: 300px;
z-index: 9999;
display: none;
border-radius: 4px;
padding: 10px 10px 2px 10px;
animation: fade-in;
animation-duration: 0.5s;
-webkit-animation: fade-in 0.5s;
border: 1px solid #ddd;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
#output img {
position: absolute;
top: 72px;
rightright: 72px;
width: 25px;
height: 25px;
}
.qr .fa-qrcode {
font-size: 20px !important;
line-height: 32px !important;
}
.qr-img .arrow {
position: absolute;
font-size: 26px;
bottombottom: 2px;
}
.arrow-y {
color: #fff;
rightright: -8px;
}
.arrow-z {
color: #c6c6c6;
rightright: -9px;
}
#output td {
border: none;
}
#output td {
padding: 0;
}
.page-template-template-blog #scroll li a.scroll-c,.page-template-template-code #scroll li a.scroll-c,.page-template-template-links #scroll li a.scroll-c,.page-template-template-archives #scroll li a.scroll-c,.page-template-template-cms #scroll li a.scroll-c,.page-template-template-hot #scroll li a.scroll-c,.page-template-template-tag #scroll li a.scroll-c,.page-template-template-tougao #scroll li a.scroll-c,.page-template-template-contact #scroll li a.scroll-c,.page-template-template-message #scroll li a.scroll-c,.page-template-template-baidu #scroll li a.scroll-c {
display: none;
}
#scroll li a {
background: #2f9a3c;
}
效果图:
版权申明:

请先 !