shkong

[分享]博客美化教程 - 文章头图圆角、焦点放大、头像转动
首页文章板式圆角化/*首页文章版式圆角化*/ .panel{ border: none; bord...
扫描右侧二维码阅读全文
19
2018/05

[分享]博客美化教程 - 文章头图圆角、焦点放大、头像转动

首页文章板式圆角化

/*首页文章版式圆角化*/
.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 .5s
}

使用方法

后台 - 外观设置 - 自定义CSS 将以上代码复制进去即可

本文章转自XSY

Last modification:May 19th, 2018 at 09:59 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment