多说像鼠标悬停旋转效果

多说像鼠标悬停旋转效果

 

最近对多说的头像有点意见,想让多说头像动态起来,可以实现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都可以去掉。

 

本站的文章和资源来自互联网或者站长 的原创,按照 CC BY -NC -SA 3.0 CN 协议发布和共享,转载或引用本站文章 应遵循相同协议。如果有侵犯版权的资 源请尽快联系站长,我们会在24h内删 除有争议的资源。同时本站资源或者文 章未经允许,禁止转载抄袭,谢谢支持左迪自留地 » 多说像鼠标悬停旋转效果
赞(0) 打赏

评论抢沙发

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