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

  • 2
  • 400 views

相信我们在使用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
  • 转载注明:https://www.japanren.com/1209.html
修改数据库密码后导致网站无法打开该怎么解决? 网站建设

修改数据库密码后导致网站无法打开该怎么解决?

今天无缘无故不知道发什么癫,一时兴起,想统一下阿里后台的登录密码,接着把FTP密码也给重置了遍,后面想了下,要不就把数据库密码也统一下吧。统一好了后方才发现网站打不开了,顿时有点百思不得其解,以前用织...
WordPress如何实现多域名访问同一站点 WordPress

WordPress如何实现多域名访问同一站点

有些时候总有人会有这样一个要求,就是希望自己所搭建的WordPress网站,能够通过多个域名访问同一站点,关于目的我们不得而知。有可能是利用一个灰帽的手法,这种手法类似301重定向,将多个域名访问同一...
给WordPress博客的小工具添加用户访问次数 WordPress

给WordPress博客的小工具添加用户访问次数

好像总有些人喜欢一些花哨的玩意,就像WordPress主题里的自定义鼠标,还有爆炸性点击效果一样,不过也是,毕竟每个人的喜好都不一样。 今天在诗梦博客里看到这个效果,可以统计出每一位用户IP的访问次数...
Begin主题新版标题如何修改成居中 WordPress

Begin主题新版标题如何修改成居中

鸟哥的WordPress系统begin主题又更新了,不得不感叹,这个更新的速度是一般人难以跟上的。这次鸟哥好像把文章标题的H1居中代码给删了,对于一直看惯了标题居中的我们来说,确实有点别扭,横看竖看都...
匿名

发表评论

匿名网友 填写信息

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

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