首页 > 新闻资讯 > 让你的WordPress评论头像圆形旋转起来

让你的WordPress评论头像圆形旋转起来

3条评论
标签:
更多

使用Wordpress博客后我们经常需要对主题进行各种修改来达到自己想要的效果,下面兔子就跟大家分享下使用CSS把博客评论栏里的头像改为圆形并且产生圆转动画。

找到自己主题的Style.css,在最下面添加如下代码即可。(IE浏览器暂不支持旋转)

  .avatar{

  /*设置圆形*/

  border-radius:60px;

  -webkit-border-radius:60px;

  -moz-border-radius:60px;

  box-shadow: inset 0 -1px 0 #3333sf;

  -webkit-box-shadow: inset 0 -1px 0 #3333sf;

  transition: transform 0.5s ease-out;

  -webkit-transition: 0.5s ease-out;

  -moz-transition: -moz-transform 0.5s ease-out;}

  .avatar:hover{

  /*旋转动画*/

  box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

  -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

  transform: rotateZ(360deg);

  -webkit-transform: rotateZ(360deg);

  -moz-transform: rotateZ(360deg);}

  保存,刷新一下,效果就出来了。

来源:网络收集

Wordpresstx

* 版权声明:作者WordPress啦! 转载请注明出处。

#1
很多站点都在用这种了。
#2
收藏 收藏 真是不错
#3
IE10应该可以吧