多说评论头像鼠标悬停旋转效果

最近换了新主题,前前后后折腾了2、3天改样式,基本是完工了,后续的小问题再慢慢改,这一改和原主题差别都很大了。其中在文章页我添加了一个作者信息和文章版权说明的框体,见下图。左边是一个作者头像,特意添加了一个鼠标悬停在头像上时旋转头像360度效果,挺酷的,而多说评论由于css是从服务器加载的,不过多说后台设置有自定义css,这就方便了我们去修改头像的css了。

authorinfo

多说的头像父级div容器类是.ds-avatar,因此在自定义css中加上以下代码:

.ds-avatar{-webkit-border-radius: 5px !important;/*圆角效果:兼容webkit浏览器*/
-moz-border-radius:5px !important;
box-shadow: inset 0 -1px 0 #3333sf !important;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf !important;
-webkit-transition: 0.4s !important;
-webkit-transition: -webkit-transform 0.4s ease-out !important;
transition: transform 0.4s ease-out !important;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度)*/
-moz-transition: -moz-transform 0.4s ease-out !important; }
.ds-avatar:hover{box-shadow: 0 0 10px #fff !important; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1) !important;
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1) !important;
transform: rotateZ(360deg) !important;/*图像旋转360度*/
-webkit-transform: rotateZ(360deg) !important;
-moz-transform: rotateZ(360deg) !important;}

代码中!important是为了提高样式规则的应用优先权,保证自定义css比服务器默认的优先。

同样,如果主题本身任意位置使用头像并添加鼠标悬停旋转效果,就像上图我的那个一样,原理是和上述代码一样,但是注意父级div容器类改为.avatar,以保持和avatar服务器一致,同时!important都可以去掉。