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

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

<!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>

0

0

信者得救

用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>

0

0

随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

CSS3
Html/CSS: 为什么字体颜色在Eclipse上没有变化 2 回答