EMLOG评论头像实现鼠标滑过自动旋转的代码

2019-9-14 / 0 评论 / 843 阅读
注意:本文最后更新于2019-9-14,已超半年没有更新,若内容或图片失效,请留言反馈。

对网站进行细节上的优化是几乎每一个站长都喜欢做的事情,比如给网站的标题加滑过特效,现在就来为大家分享一个EMLOG评论头像实现鼠标滑过自动旋转的代码。

一、操作步骤

1、打开模板的css文件,找到控制头像属性的css,然后添加属性

2、下面是实现头像变成圆形的css代码

aloboke{
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;
//这是把图片变为圆圈
}

3、下面是实现鼠标滑过头像自动旋转的代码

aloboke:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
//这是图像旋转
}

二、教程解析

本教程的第2步和第3步分别是给头像指定圆形和鼠标滑过自动旋转的属性,方法很简单

三、注意事项

1、每个模板不同,限定头像的css名称也不同,因此需要根据自己模板进行修改,本教程以aloboke{}为例

评论一下?

OωO
取消