У меня вопрос по поводу того как синхронизировать анимации @keyframes. Есть планета, которая вращается по кругу. Мне хочется добавить ещё одну, но с другой точкой старта. Однако, получается, что анимации выполняются последовательно и одна планета накладывается на другую, а точка старта меняется скачкообразно. Как это можно исправить? И ещё подскажите, как сделать чтобы вращающаяся планета была привязана к центральной не вылетала с орбиты при изменении размера окна.
html {
height:100%;
}
body {
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
/*контент в центр страницы*/
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
margin: 33% 33% 33% 33%;
background: radial-gradient(#60AAFE, #0455F1, #D86AF7);
border-radius: 50%;
height: 100px;
width: 100px;
transition: all 0.6s ease;
}
.circle1,
.circle2 {
background: radial-gradient(#60AAFE, #0455F1, #D86AF7);
border-radius: 50%;
height: 70px;
width: 70px;
transition: all 0.6s ease;
position: absolute;
margin: 8%;
transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
/*при наведении на фигуру*/
.circle:hover,
.circle1:hover,
.circle2:hover {
box-shadow: inset #57A8FA 0 0 40px 10px,
#57A8FA 0 0 24px 12px;
}
.donut {
border: 1px solid #F0FFFF;
border-radius: 150px;
height:300px;
width:300px;
box-shadow: inset #57A8FA 0 0 20px 5px,
#57A8FA 0 0 22px 7px;
}
.orbit1 {
position: absolute;
right: 33%;
animation: Orbita 15s linear infinite;
}
@keyframes Orbita {
from {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
}
.orbit2 {
position: absolute;
right: 33%;
left: 39%;
top: 29%;
bottom: 33%;
animation: Orbita 15s linear infinite;
}
@-webkit-keyframes Orbita {
from {
-webkit-transform: rotate(180deg) translateX(150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
}
<div class="donut">
<figure class="circle1 circle1-pos orbit1"></figure>
<figure class="circle2 circle2-pos orbit2"></figure>
<figure class="circle"></figure>
</div>
Попробуйте
@keyframes Orbita2 {
from { transform: rotate(180deg) translateX(150px) rotate(180deg); }
to { transform: rotate(540deg) translateX(150px) rotate(540deg); }
}
.orbit2 {
animation: Orbita2 15s linear infinite;
}
Итого:
html {
height:100%;
}
body {
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
/*контент в центр страницы*/
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
margin: 33% 33% 33% 33%;
background: radial-gradient(#60AAFE, #0455F1, #D86AF7);
border-radius: 50%;
height: 100px;
width: 100px;
transition: all 0.6s ease;
}
.circle1,
.circle2 {
background: radial-gradient(#60AAFE, #0455F1, #D86AF7);
border-radius: 50%;
height: 70px;
width: 70px;
transition: all 0.6s ease;
position: absolute;
margin: 8%;
transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
/*при наведении на фигуру*/
.circle:hover,
.circle1:hover,
.circle2:hover {
box-shadow: inset #57A8FA 0 0 40px 10px,
#57A8FA 0 0 24px 12px;
}
.donut {
border: 1px solid #F0FFFF;
border-radius: 150px;
height:300px;
width:300px;
box-shadow: inset #57A8FA 0 0 20px 5px,
#57A8FA 0 0 22px 7px;
}
.orbit1 {
position: absolute;
right: 33%;
animation: Orbita 15s linear infinite;
}
@keyframes Orbita {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
@keyframes Orbita2 {
from { transform: rotate(180deg) translateX(150px) rotate(180deg); }
to { transform: rotate(540deg) translateX(150px) rotate(540deg); }
}
.orbit2 {
position: absolute;
right: 33%;
left: 39%;
top: 29%;
bottom: 33%;
animation: Orbita2 15s linear infinite;
}
<div class="donut">
<figure class="circle1 circle1-pos orbit1"></figure>
<figure class="circle2 circle2-pos orbit2"></figure>
<figure class="circle"></figure>
</div>
Топ-20 лучших университетов мира по IT и программированию – Образование за границей
На днях набросал код верхнего меню без использования скриптовВсё работает на ура, но правильно ли это? Дело в том, что я использовал для стилизации...
Никак не могу понять как работает alignas()Почему расстояние равно 2016, а без него 24?
ЗдравствуйтеПишу небольшой клиент вк и мне надо для авторизации открыть сайт для подтверждения