关于课堂实例的修改产生的问题

hms***

loading效果

body{
background-color:black;
}
.spinner{
width:100px;
height:100px;
margin:100 auto;
border: 20px solid grey;
border-left-color:white;
border-radius:50%;
}
.spinner:hover{
animation: circle 1s linear infinite;
}
@keyframes circle {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}

这个代码是让鼠标悬停在圆圈时产生无限旋转的效果
移开鼠标后圆圈又会跳回初始位置
请问如何修改代码能让鼠标离开圆圈时，圆圈仍停在当前位置
鼠标再次移上圆圈时，圆圈从该位置开始无限旋转
求大神指点谢谢

s***

今天学到一个新的CSS3的动画属性，发现是可以用CSS3来实现这个效果的。代码如下：
loading效果body{background-color:black;}.spinner{width:100px;height:100px;margin:100auto;border:20pxsolidgrey;border-left-color:white;border-radius:50%;animation:circle1slinearinfinite;animation-play-state:paused;}.spinner:hover{animation-play-state:running;}@keyframescircle{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

m1613***

用CSS3是没法写出你要的效果的吧，因为CSS没法获得旋转后的角度，进行定位。用JS写一下倒是很简单的。
loading效果body{background-color:black;}.spinner{width:100px;height:100px;margin:100auto;border:20pxsolidgrey;border-left-color:white;border-radius:50%;}varspinner=document.getElementsByClassName('spinner')[0];varrotate=0;vartimer;spinner.onmouseout=function(){clearInterval(timer);rotate=Number(spinner.style.transform.slice(7,-4))%360;spinner.style.transform='rotate('+rotate+'deg)';}spinner.onmouseover=function(){varspeed=0;timer=setInterval(function(){speed=speed+1;spinner.style.transform='rotate('+(rotate+speed)%360+'deg)';},3)}</script>

已有账号？

找人解决需求

关于课堂实例的修改产生的问题

全部参与2

热门问答

hms***

今日需求悬赏

今日问答求助

发布任务需求已有1031166位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端