Loading
0

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

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

(转自星光博客)知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的,也没有如图显示的绿色阴影效果。(此代码适用于任何主题,行适当修改class就行)

在原来的基础如你所见,是在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

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-19-18742-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
上一篇:wordpress插件:使用G-prettify插件-实现代码高亮
下一篇:QPlayer左下角悬浮多功能mp3音乐播放器插件