WordPress ·

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

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

authorinfo

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

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

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

参与评论

  • work_

    CSS是门技术活。

    3年前 (2017-01-23)
    回复
    回复work_
  • ilunpo

    反应一个问题,手机浏览博客,搜索文章,搜索结果列表中,第一篇点击打不开。。

    4年前 (2015-05-12)
    回复
    回复ilunpo
  • K

    现在这种方形扩大旋转效果怎么弄,还有教程的代码框怎么显示不全也不能复制

    5年前 (2015-01-12)
    回复
    回复K
  • 知言

    利用js鼠标mouseover头像时给头像添加类avatar-rotate,然后settimeout一定时间后取消该类,类的样式为

    .avatar-rotate {animation: starrotate .8s; -moz-animation: starrotate .8s; -ms-animation: starrotate .8s; -webkit-animation: starrotate .8s;  -o-animation: starrotate .8s;}

    这个里面用到了css3的动画效果starrotate,所以还要定义starrotate动画的方式,代码如下:

    @keyframes starrotate{
      0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1); -o-transform:rotate(0deg) scale(1,1); transform:rotate(0deg) scale(1,1);  opacity:1;}
      50% { -webkit-transform:rotate(540deg) scale(2,2);-moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2);  -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }
      100%{ -webkit-transform:rotate(1080deg) scale(1,1);-moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1); -o-transform:rotate(1080deg) scale(1,1); transform:rotate(1080deg) scale(1,1); opacity:1;}
    }
    @-moz-keyframes starrotate{
      0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1);-o-transform:rotate(0deg) scale(1,1);transform:rotate(0deg) scale(1,1); opacity:1;}
      50% { -webkit-transform:rotate(540deg) scale(2,2);-moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }
      100%{ -webkit-transform:rotate(1080deg) scale(1,1);-moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1);-o-transform:rotate(1080deg) scale(1,1);transform:rotate(1080deg) scale(1,1); opacity:1;}
    }
    @-webkit-keyframes starrotate{
      0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1); -o-transform:rotate(0deg) scale(1,1); transform:rotate(0deg) scale(1,1);  opacity:1;}
      50% { -webkit-transform:rotate(540deg) scale(2,2); -moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }
      100%{ -webkit-transform:rotate(1080deg) scale(1,1); -moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1); -o-transform:rotate(1080deg) scale(1,1);  transform:rotate(1080deg) scale(1,1);  opacity:1;}
    }
    @-o-keyframes starrotate{
      0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1);-o-transform:rotate(0deg) scale(1,1);transform:rotate(0deg) scale(1,1); opacity:1;}
      50% { -webkit-transform:rotate(540deg) scale(2,2);  -moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }
      100%{ -webkit-transform:rotate(1080deg) scale(1,1);  -moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1); -o-transform:rotate(1080deg) scale(1,1); transform:rotate(1080deg) scale(1,1); opacity:1;}
    }
    5年前 (2015-01-12)
    回复
    回复知言
  • K

    谢谢解答

    5年前 (2015-01-13)
    回复
    回复K
  • Brainu

    不错!

    6年前 (2014-03-07)
    回复
    回复Brainu
  • Faris

    赞一个~~~

    6年前 (2014-03-04)
    回复
    回复Faris