给知更鸟主题评论头像添加旋转变圆特效

  • 2
  • 287 views
  • A+
所属分类:wordpress主题

相信我们在使用WordPress模板的时候都看见过这么一个情况,就是看到评论者的头像在鼠标没有挪动的情况下是不会发生任何改变,但如果鼠标一挪动的时候就会旋转变圆的现象。特别是最近使用的比较火的知更鸟主题,知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的。

给知更鸟主题评论头像添加旋转变圆特效

但是近期在有些博客里面看到了,就是上面所提到的鼠标经过评论者的头像时会有变圆且有阴影效果的迹象,叶忠文也是十分的喜欢。于是便网上各种搜索各种寻找,皇天不负有心人,终于被我所找到,后来在星光博客里找到这么一个教程,效果如下图所示:

给知更鸟主题评论头像添加旋转变圆特效

好了,多的咱就不墨迹了,直接进入正题吧,第一步,首先在Style.css中添加以下代码。

    /**头像旋转的效果**/
    .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);
    }

第二步,在Style.css中查找以下代码并用新代码直接覆盖。

原先代码

    .vcard .avatar {
        float: left;
        width: 64px;
        height: 64px;
        margin: 7px 10px 0 0;
        padding: 3px;
        border-radius: 5px;
        border: 1px solid #ddd;
        transition: all 0.8s ease 0s;
    }

用以下代码直接替换

    .vcard .avatar {
        box-shadow:0px 0px 1px;
        float: left;
        width: 40px;
        height: 40px;
        margin: 6px 10px 0 0;
        padding: 2px;
        border: 1px solid #ddd;
        transition: all 0.8s ease 0s;
        -webkit-transition: all 0.8s ease 0s;
        -moz-transition: all 0.8s ease 0s;
        -o-transition: all 0.8s ease 0s;
        -ms-transition: 0.8s;
    }
    .vcard:hover .avatar {
        box-shadow:0px 0px 10px #0c0;
        transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        border-radius:40px!important;
        filter:alpha(opacity=100)!important;
        opacity:1!important;
    }

 

注明:这个本人暂时只在Begin主题试验过,是没问题的,其他WP主题不敢担保一定可以,当然!喜欢折腾的朋友们也可以去尝试尝试

Joson

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • 猫叔 猫叔 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省安庆市 电信 3

      让它转半圈比较有意思

        • Joson Joson  博主 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 鹏博士长城宽带

          @猫叔 暂时还没研究出你说的特效!