订阅/程序下载
5ucms培训,WordPress修改评论头像为圆形并旋转的方法
作者: 来源: 日期:2015/11/14 23:27:37 浏览量:149(滞后) 人气:LOADING...(实时) 【

 

  使用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);}

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

  以上内容由兔子博客整理,欢迎转载。

  原文链接:http://www.lyz.me/wordpress-avatar.html

5ucms插件网收集整理

本站推荐:5ucms模板 5ucms插件 微信/QQ:3876307        [复制给好友] [打印] [关闭] [返回] [顶部]
上一篇:5ucms仿站,百度改版后网站内、外链建设操作手法
下一篇:5ucms教程,网店货源平台类站点用户群分析
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。
常见问题: 什么是路径码? 如有问题,请在下方评论提问或加入5ucmsQQ群
5ucms培训,WordPress修改评论头像为圆形并旋转的方法的关键词:方法 旋转 修改 圆形 评论 培训 头像
评论信息
相关分类
本周热门
本月热门
关于我们 - 版权/免责 申明 - 建站服务 - 网站地图 - 稿件投递 - 联系我们 - 5ucms
Copyright © 2008-2015 www.5ucms.org 微信/QQ:3876307