add blog sidebar-author.styl
parent
9429c1a8bd
commit
8c453e1cdb
|
@ -0,0 +1,76 @@
|
|||
.site-author-image {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: $site-author-image-padding;
|
||||
max-width: $site-author-image-width;
|
||||
height: $site-author-image-height;
|
||||
border: $site-author-image-border-width solid $site-author-image-border-color;
|
||||
|
||||
/* 头像圆形 */
|
||||
border-radius: 80px;
|
||||
-webkit-border-radius: 80px;
|
||||
-moz-border-radius: 80px;
|
||||
box-shadow: inset 0 -1px 0 #333sf;
|
||||
|
||||
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
|
||||
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
|
||||
-webkit-animation: play 2s ease-out 1s 1;
|
||||
-moz-animation: play 2s ease-out 1s 1;
|
||||
animation: play 2s ease-out 1s 1;
|
||||
|
||||
/* 鼠标经过头像旋转360度 */
|
||||
-webkit-transition: -webkit-transform 1.5s ease-out;
|
||||
-moz-transition: -moz-transform 1.5s ease-out;
|
||||
transition: transform 1.5s ease-out;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
/* 鼠标经过停止头像旋转
|
||||
-webkit-animation-play-state:paused;
|
||||
animation-play-state:paused;*/
|
||||
|
||||
/* 鼠标经过头像旋转360度 */
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
-moz-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
/* Z 轴旋转动画 */
|
||||
@-webkit-keyframes play {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateZ(-360deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes play {
|
||||
0% {
|
||||
-moz-transform: rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotateZ(-360deg);
|
||||
}
|
||||
}
|
||||
@keyframes play {
|
||||
0% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.site-author-name {
|
||||
margin: $site-author-name-margin;
|
||||
text-align: $site-author-name-align;
|
||||
color: $site-author-name-color;
|
||||
font-weight: $site-author-name-weight;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
margin-top: $site-description-margin-top;
|
||||
text-align: $site-description-align;
|
||||
font-size: $site-description-font-size;
|
||||
color: $site-description-color;
|
||||
}
|
Loading…
Reference in New Issue