<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>loading效果</title> <style type="text/css"> 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); } } </style></head><body> <div class="spinner"></div></body></html>这个代码是让鼠标悬停在圆圈时产生无限旋转的效果移开鼠标后圆圈又会跳回初始位置请问如何修改代码 能让鼠标离开圆圈时，圆圈仍停在当前位置鼠标再次移上圆圈时，圆圈从该位置开始无限旋转求大神指点 谢谢
2 回答
信者得救
TA贡献22条经验 获得超10个赞
今天学到一个新的CSS3的动画属性，发现是可以用CSS3来实现这个效果的。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loading效果</title>
<style type="text/css">
body{
background-color:black;
}
.spinner{
width:100px;
height:100px;
margin:100 auto;
border: 20px solid grey;
border-left-color:white;
border-radius:50%;
animation: circle 1s linear infinite;
animation-play-state: paused;
}
.spinner:hover{
animation-play-state: running;
}
@keyframes circle {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
信者得救
TA贡献22条经验 获得超10个赞
用CSS3是没法写出你要的效果的吧，因为CSS没法获得旋转后的角度，进行定位。用JS写一下倒是很简单的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loading效果</title>
<style type="text/css">
body{
background-color:black;
}
.spinner{
width:100px;
height:100px;
margin:100 auto;
border: 20px solid grey;
border-left-color:white;
border-radius:50%;
}
</style>
</head>
<body>
<div class="spinner" style="transform:rotate(0deg);"></div>
<script type="text/javascript">
var spinner = document.getElementsByClassName('spinner')[0];
var rotate = 0;
var timer;
spinner.onmouseout = function() {
clearInterval(timer);
rotate = Number(spinner.style.transform.slice(7,-4))%360;
spinner.style.transform = 'rotate(' + rotate + 'deg)';
}
spinner.onmouseover = function() {
var speed = 0;
timer = setInterval(function(){
speed = speed + 1;
spinner.style.transform = 'rotate(' + (rotate + speed)%360 + 'deg)';
},3)
}
</script>
</body>
</html>- 2 回答
- 0 关注
- 1401 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消