Question

我正在尝试使一个圆圈在另一个旋转的圆圈内旋转。

我正在使用Webkit动画。该代码可用于两个单独的圈子，但无法连接。

<style> 
.loader { 
  border: 16px solid #f3f3f3; 
  border-radius: 50%; 
  border-top: 16px solid #3498db; 
  margin-left: 170px; 
  width: 120px; 
  height: 120px; 
  -webkit-animation: spin .25s linear infinite; /* Safari */ 
  animation: spin .25s linear infinite; 
} 
.loader2 { 
  border: 16px solid #f3f3f3; 
  border-radius: 50%; 
  border-top: 16px solid #3498db; 
  width: 300px; 
  height: 300px; 
  -webkit-animation: spin2 .25s linear infinite; /* Safari */ 
  animation: spin2 .25s linear infinite; 
}
@-webkit-keyframes spin { 
  0% { -webkit-transform: rotate(0deg); } 
  100% { -webkit-transform: rotate(360deg); } 
} 

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
} 
@-webkit-keyframes spin2 { 
  0% { -webkit-transform: rotate(0deg); } 
  100% { -webkit-transform: rotate(360deg); } 
}   
@keyframes spin2 { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
} 
</style> 
</head> 
<body> 
<h2>How To Create A Loader</h2> 

<div class="loader">
    </div> 
 <div class="loader2"></div> 
</body></html>

预期输出是一个圆圈在另一个旋转圆圈内旋转

Answer 1

使用div的绝对位置。像这样：

.loader {
    position: absolute;
    (rest of code and delete margin)
}

.loader2 {
    position: absolute;
    left: -70px; top: 100px;
    (rest of code)

}

如何使用Webkit Animation使一个圆圈在另一个圆圈中旋转

1 个答案: