WordPress评论头像旋转特效实现方法

132次阅读
没有评论

共计 481 个字符,预计需要花费 2 分钟才能阅读完成。

将鼠标放在头像中,头像会出现 360 度旋转,相信很多朋友都遇到过,看起来也挺有意思的,索性博主也给自己的网站加了这么一个特效。如果你的网站是 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);
}

将以上代码直接放进 style.css 文件中即可,经博主亲测,网络上绝大部分的 WordPress 主题都支持该效果,个别主题添加以上代码是没有效果的,使用前建议先做好备份。

头像旋转特效预览

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-06-03发表,共计481字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)