林阿三

Typecho添加文章头图圆角显示、获取焦点放大、头像转动特效
文章头图圆角显示/*首页文章版式圆角化*/ .panel{ border: none; borde...
扫描右侧二维码阅读全文
16
2018/05

Typecho添加文章头图圆角显示、获取焦点放大、头像转动特效

文章头图圆角显示

/*首页文章版式圆角化*/
.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:100px; 
}

.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
}
最后修改:2018 年 05 月 16 日 02 : 27 PM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 林阿三

    11111

发表评论