把评论头像变成圆圈的样子并转动,如上图所示
主要运用了CSS代码,今天就给大家分享方法:
如果没有CSS基础的朋友,要在网上看看相关的资料咯。
首先,找到我们设置评论头像的CSS,比如易捷博客使用 ycyjkj{} ,我们就需要在属性处,添加以下代码:
ycyjkj{ border-radius: 50%; -webkit-transition: .4s all ease-in-out; -moz-transition: .4s all ease-in-out; -o-transition: .4s all ease-in-out; -ms-transition: .4s all ease-in-out; transition: .4s all ease-in-out; //这是把图片变为圆圈 }
下面的就是鼠标在图标上时,图片自动旋转
ycyjkj:hover{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); //这是图像旋转 //易捷博客网 www.vxia.net }
图片就如文章最上方的演示效果图一样。