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

BG4PGR
141
文章
315
评论
2018年8月7日17:43:56 11 5,719 1403字阅读4分40秒

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

知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的,也没有如图显示的绿色阴影效果。

在原来的基础如你所见,是在Style.css文件添加了以下几行代码实现的。

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

第一步,首先在Style.css中添加以下代码

  1. /**头像旋转的效果**/
  2. .avatar{
  3.    -webkit-transition:0.4s;
  4.    -webkit-transition:-webkit-transform 0.4s ease-out;
  5.    transition:transform 0.4s ease-out;
  6.    -moz-transition:-moz-transform 0.4s ease-out;
  7. }
  8. .avatar:hover{
  9.    transform:rotateZ(360deg);
  10.    -webkit-transform:rotateZ(360deg);
  11.    -moz-transform:rotateZ(360deg);
  12. }

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

旧代码:

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

用以下新代码直接替换。

  1. .vcard .avatar {
  2.     box-shadow:0px 0px 1px;
  3.     float: left;
  4.     width: 40px;
  5.     height: 40px;
  6.     margin: 6px 10px 0 0;
  7.     padding: 2px;
  8.     border: 1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10.     -webkit-transition: all 0.8s ease 0s;
  11.     -moz-transition: all 0.8s ease 0s;
  12.     -o-transition: all 0.8s ease 0s;
  13.     -ms-transition: 0.8s;
  14. }
  15. .vcard:hover .avatar {
  16.     box-shadow:0px 0px 10px #0c0;
  17.     transform: rotate(720deg);
  18.     -webkit-transform: rotate(720deg);
  19.     -moz-transform: rotate(720deg);
  20.     -o-transform: rotate(720deg);
  21.     -ms-transform: rotate(720deg);
  22.     border-radius:40px!important;
  23.     filter:alpha(opacity=100)!important;
  24.     opacity:1!important;
  25. }

文章参考来源:堆爱博客 http://duiai.cc/comments-round-the-heads-add-rotation-effects.html/comment-page-3/#comments

继续阅读
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
  • 版权声明: 发表于 2018年8月7日17:43:56
  • 转载注明:https://www.xgboke.com/1204.html
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
知更鸟主题回复邮件通知功能失效修复方法 WordPress

知更鸟主题回复邮件通知功能失效修复方法

星光最近使用了知更鸟主题的最新版本,主题变化挺大的,越来越好,在这里要感谢“鸟哥”的辛勤付出,开发出了这么优秀的WordPress主题!自从更新主题后,博客也有不少网友过来捧场留言,星光也在第一时间回...
匿名

发表评论

匿名网友 填写信息

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

评论:11   其中:访客  8   博主  3
    • 小白兔 小白兔 @回复 1 来自天朝的朋友 谷歌浏览器 Windows 10 北京市海淀区 联通

      博客不错,希望共同进步

        • BG4PGR BG4PGR  博主 @回复 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

          @小白兔 欢迎欢迎,大家同进步。

        • un un @回复 2 来自天朝的朋友 火狐浏览器 Windows 10 辽宁省沈阳市 联通

          图片里有我哎 :oops:

            • BG4PGR BG4PGR  博主 @回复 来自天朝的朋友 火狐浏览器 Unknow Os 山东省潍坊市 移动

              @un 榜上有名 666

            • 网站建设 网站建设 @回复 3 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

              写的不错 :oops: :oops:

              • 沙扬娜拉 沙扬娜拉 @回复 0 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省荆门市 电信

                博主是个人才!

                • 蓝亚之舟 蓝亚之舟 @回复 3 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 北京宽带通电信技术有限公司

                  相当赞的功能!

                  • 明月登楼 明月登楼 @回复 3 来自天朝的朋友 谷歌浏览器 Windows 7 河南省南阳市 电信

                    放到主题设置定制化里不可以吗?我试过了,放到主题设置——定制风格里可以的!直接修改style.css不建议,更新主题就会被覆盖! :mrgreen:

                      • BG4PGR BG4PGR  博主 @回复 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                        @明月登楼 放到主题自定义了也可以呀!以前不会改CSS,只能照葫芦画瓢一段段的修改,一升级主题就头疼,又要重新来过 :cry: 后来连续升级了几次后,学聪明了,花了一阵子时间,把要修改的CSS全部整理好后放到了Style.css的最后面替换原CSS,以后再升级主题,直接粘贴到新升级的主题就OK了 :mrgreen:

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

                        这个效果挺不错的,值得收藏!

                        • MAY的SEO博客 MAY的SEO博客 @回复 3 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 联通

                          这个不错哟,回头试试。