<!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 關注
- 1449 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消