需求大概是,鼠标移入,头像正向旋转,鼠标移除,头像逆向回转。分别用了CSS动画还有JS实现,但是JS给我感觉会好点,因为我希望实现的是鼠标进入,获取当前旋转角度,正向加旋,鼠标移除,获取当前角度,逆向减旋,后面发现css实现的动画,是从你设置的初始开始,即鼠标进入,从0开始,鼠标移出,从360度开始,所以不是很理想。纠结半天最后最后发现用transition是最优解。
以下是全部代码,全局调用vert可以看CSS动画的实现,调用test()可以查看js实现。
test主要用到了定时器,每隔10ms就调用一次,设置旋转的角度。
这里是style部分
body{
margin:0;
padding: 0;
}
.head_portrait{
width: 80px;
height: 80px;
border-radius: 50px;
}
.content{
position: relative;
width: 80px;
height: 80px;
}
@keyframes img-animation{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes img-animation-out{
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
页面部分
<div class="content">
<img class="head_portrait" src="#" alt="图片无法显示">
</div>
js实现图片的旋转
这里是JS部分
var angle=0;
var obj;
test();
function vert(){
var content = document.querySelector(".content");
content.onmouseover=function(){
var head_portrait=document.querySelector(".head_portrait");
head_portrait.style.animation="img-animation 1s ease-out";
head_portrait.style.webkitAnimation ="img-animation 1s ease-out";
head_portrait.style.animationFillMode="forwards";
head_portrait.style.webkitAnimationFillMode="forwards";
}
content.onmouseout=function(){
var head_portrait=document.querySelector(".head_portrait");
head_portrait.style.animation="img-animation-out 1s ease-out";
head_portrait.style.webkitAnimation ="img-animation-out 1s ease-out";
head_portrait.style.animationFillMode="forwards";
head_portrait.style.webkitAnimationFillMode="forwards";
}
}
function test(){
var content = document.querySelector(".content");
content.onmouseover=function(){
window.clearInterval(obj);
obj = window.setInterval(revert,10);
}
content.onmouseout=function(){
window.clearInterval(obj);
obj = window.setInterval(antivert,10);
}
}
function revert(){
var head_portrait=document.querySelector(".head_portrait");
head_portrait.style.transform="rotate("+angle+"deg)";
if(angle<360){
angle+=3.6;
}else{
clearInterval(obj);
}
}
function antivert(){
var head_portrait=document.querySelector(".head_portrait");
head_portrait.style.transform="rotate("+angle+"deg)";
if(angle>0){
angle-=3.6;
}else{
clearInterval(obj);
}
}
发现了另一个最优实现方法。。。帖粗来。。
div:{
transition:transform 2s linear; //表示对transform这个属性进行变化
}
div:hover {
transform:rotate(360deg);//如果鼠标移入,div会旋转,而且还会在你移开时回旋,最好的办法
}