Как сделать вращение круга внутри другого круга с помощью анимации Webkit - PullRequest
Новая
       2

Как сделать вращение круга внутри другого круга с помощью анимации Webkit

0 голосов
/ 24 сентября 2019

Я пытаюсь сделать круг, вращающийся внутри другого круга.

Я использую анимацию 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>

Ожидаемый результат - один круг вращается внутри другого вращающегося круга

1 Ответ

0 голосов
/ 24 сентября 2019

Используйте абсолютные позиции делений.Как то так: 

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

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

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...