WordPress教程

CSS实现WordPress评论用户头像旋转特效

这是一个小特效,让评论者的头像动起来,为网站增加一些“生机”。

实现的方法有两种:

第一种:

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

第二种:

/*头像旋转特效*/
.comment-list .avatar{border: 1px solid #ccc;}
.vcard .avatar {
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 {
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;
}

选一种加入主题的CSS文件当中,保存强制刷新即可。

两种方法在特效上有些许差异,可以两种方法分别试下,选择合适自己的;也可自己修改部分参数,达到最佳效果。

在不同的主题上可能会失效,可以多尝试下。

We can do it.

WordPress代码实现自动给图片添加alt标签

上一篇

WordPress自动为文章添加特色图像

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
猫鼬 管理员
We can do it.
最近文章
  • * 没有更多文章了
  • TAGS

    CSS实现WordPress评论用户头像旋转特效

    长按储存图像,分享给朋友