自己用到的一些配置
#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
#放大的时间和大小自行修改以下数值(别复制该行)
/*首页文章图片获取焦点放大*/
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.05);
}
#转动快慢和头像大小自行修改数值(别复制该行)
/*首页头像自动旋转*/
.thumb-lg{
width:130px;
}
.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);
}
#aside-user span.avatar{
animation-timing-function:cubic-bezier(0,0,.07,1)!important;
border:0 solid
}
#aside-user span.avatar:hover{
transform:rotate(360deg) scale(1.2);
border-width:5px;
animation:avatar 1s
}
#旋转速度请修改3s数值(别复制该行)
/*首页头像放大并自动旋转*/
/* .thumb-lg{
width:130px;
}
@-webkit-keyframes rotation{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.img-full{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
} */
#阴影颜色修改rgba后面的值(别复制该行)
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
#如果也想使盒子四周也有阴影,加上以下代码
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 3px;
height: 16px;
background-color: rgba(255,255,255,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(255,255,255,0);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}