• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.

WordPress 头像设置为圆角,鼠标触碰后旋转效果

WP插件 奇跡の海 1年前 (2017-04-22) 75次浏览 已收录 0个评论 扫描二维码

多说评论,在后台使用 CSS 将评论的头像改为圆角,鼠标触摸后头像会有转动的效果

其实在 WordPress 的默认评论中也可以使用,效果如下:

WordPress 头像设置为圆角,鼠标触碰后旋转效果

方法很简单,在/wp-content/themes/目录下,找到你当前使用的主题的文件夹,进入后,找到 style.css,将下面的代码复制后,粘贴到 style.css 文件的最下面,然后保存即可

 

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:40px;height:40px; /*设置图像的长和宽*/   
border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过 width/2 的像素,即为圆形了*/   
-webkit-border-radius: 20px;/*圆角效果:兼容 webkit 浏览器*/   
-moz-border-radius:20px;   
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/   
-webkit-box-shadow: inset 0 -1px 0 #3333sf;   
-webkit-transition: 0.4s;       
-webkit-transition: -webkit-transform 0.4s ease-out;   
transition: transform 0.4s ease-out;/*变化时间设置为 0.4 秒(变化动作即为下面的图像旋转 360 度)*/   
-moz-transition: -moz-transform 0.4s ease-out;   
}    
.avatar:hover{/*设置鼠标悬浮在头像时的 CSS 样式*/   
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);/*图像旋转 360 度*/   
-webkit-transform: rotateZ(360deg);   
-moz-transform: rotateZ(360deg); } 

修改的时候,可以根据上面绿色的注释进行修改,比如头像的大小,旋转的角度,时间等等


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->WordPress 头像设置为圆角,鼠标触碰后旋转效果!在下边可以分享本文哦!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址