突然发现本博客左边的头像固定的不好看,于是就借来【许建华博客】的分享CSS代码给美化了一下,具有动感的头像给人的感觉还是不一样的!

xuanzhuan.gif

本项修改的是首页头像,将鼠标放至头像后使其转动并放大。效果参考我博客左侧头像。
仍为本主题使用,操作方式为:将以下代码添加至后台主题设置 自定义CSS。

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.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
}
最后修改:2018 年 12 月 24 日
如果觉得我的文章对你有用,请随意赞赏