网站美化之美化滚动条

发布于 2019-12-19  89 次阅读


美化网站滚动条

滚动条样式详见本站滚动条样式,添加方法直接将以下css样式添加到页面即可

/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}

/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
}

/*—滚动条大小–*/
::-webkit-scrollbar{
width:8px;
height:18px;
}

/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

头像旋转

头像旋转仅测试了 wordpress 主题,其他主题自行修改

/*头像旋转*/
.avatar{-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;}
.avatar:hover{transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);}


本当の声を響かせてよ