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

Question

I'm trying to make a circle spinning within another spinning circle.我正在尝试使一个圆圈在另一个旋转圆圈内旋转。

I'm using Webkit Animation.我正在使用 Webkit Animation。 The code works for two separate circles, but not connected.该代码适用于两个单独的圆圈，但未连接。

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

Expected output is one circle spinning inside another spinning circle预期的 output 是一个圈在另一个圈内旋转

Answer 1

Use absolute positions of divs.使用 div 的绝对位置。 Something like this:像这样的东西：

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

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

}

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

问题描述

1 个解决方案

解决方案1
0 2019-09-23 22:21:32

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

问题描述

1 个解决方案

解决方案1 0 2019-09-23 22:21:32

解决方案1
0 2019-09-23 22:21:32