关于课堂实例的修改产生的问题
<!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>
这个代码是让鼠标悬停在圆圈时产生无限旋转的效果
移开鼠标后圆圈又会跳回初始位置
请问如何修改代码 能让鼠标离开圆圈时，圆圈仍停在当前位置
鼠标再次移上圆圈时，圆圈从该位置开始无限旋转
求大神指点 谢谢
青旗拉浏览 1402回答 2
2回答
-
信者得救
今天学到一个新的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> -
信者得救
用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>
随时随地看视频慕课网APP
CSS3
Html/CSS