如何使用 Webkit Animation 使一个圆圈在另一个圆圈内旋转答案

【问题标题】：How to make a circle spinning within another circle using Webkit Animation如何使用 Webkit Animation 使一个圆圈在另一个圆圈内旋转
【发布时间】：2019-09-23 21:28:57
【问题描述】：

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

我正在使用 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>

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

【问题讨论】：

Spinning circles css3 transition的可能重复
如果您打算将一个标签放在另一个标签中，它会起作用：jsfiddle.net/tcdmuj18

标签： javascript html animation webkit

【解决方案1】：

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

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

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

}

【讨论】：