突然发现本博客左边的头像固定的不好看,于是就借来【许建华博客】的分享CSS代码给美化了一下,具有动感的头像给人的感觉还是不一样的!
本项修改的是首页头像,将鼠标放至头像后使其转动并放大。效果参考我博客左侧头像。
仍为本主题使用,操作方式为:将以下代码添加至后台主题设置 自定义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
}
13 条评论
你好,你这个网站是什么主题啊,挺好看的
评论测试
欢迎,谢谢支持!
这个也可以应用到评论里的头像吧
是的!可以的!
(๑•̀ㅁ•́ฅ)放大的时候会导致整个栏目向下浮动,强迫症看着不太好
哦,是嘛?我还没有发现呢?
了解一下
谢谢支持哦!
每次折腾都有新内容分享,不错
呵呵,见笑了!
同理也可以添加到评论区头像
嗯,是的!