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

2019年6月5日19:06:29 2 508 views 1344字阅读4分28秒

相信我们在使用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主题不敢担保一定可以,当然!喜欢折腾的朋友们也可以去尝试尝试

叶先生
  • 本文由 发表于 2019年6月5日19:06:29
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,叶先生你知道怎么加一个吗?说实话我是不知道的,不过在鸟叔这里看到了这个教程,所以今...
WordPress如何设置只允许游客浏览指定的分类文章 WordPress

WordPress如何设置只允许游客浏览指定的分类文章

有朋友会问,WordPress如何设置只允许游客浏览指定的分类文章,因为有些分类的文章我不想未登录的用户能够浏览。 不知道是心里作怪,还是好奇心里,感叹这个世界奇葩的人还真不少,不过能有什么办法呢,谁...
如何判断网站是否采用织梦Dedecms搭建 网站建设

如何判断网站是否采用织梦Dedecms搭建

今天有朋友来问叶先生,怎么才能够知道一个网站是否采用织梦Dedecms搭建。坦白说,这个不算太高深的技术,一是凭自己的建站经验,二来是从中看一些细节。只要稍微熟悉一点dedecms的站长或者技术人员都...
用PhpStudy如何在本地搭建WordPress WordPress

用PhpStudy如何在本地搭建WordPress

以前在还没用WordPress建站的时候一直想进行尝试,但后面发现不会在本地搭建,只能够购买域名和服务器进行搭建。但是因为网站上线之初因胡乱修改网站版面,导致网站整体崩溃无法进行恢复,所以只能选择删库...
匿名

发表评论

匿名网友 填写信息

:?: :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 广东省东莞市 鹏博士长城宽带

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