致力于信息网络安全
记录成长的点点滴滴!

多说像鼠标悬停旋转效果

QQ截图20160728094547

 

最近对多说的头像有点意见,想让多说头像动态起来,可以实现360头像旋转,多说评论由于css是从服务器加载的,不过多说后台设置有自定义css,这就方便了我们去修改头像的css了。多说的头像父级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都可以去掉。

 

未经允许不得转载:左迪自留地 » 多说像鼠标悬停旋转效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

云在身边 你我共存

联系我们