Движущиеся шары на странице
Движущиеся шары на странице, очень приятные. Можно реализовать сколько угодно штук
<div class="balls">
<div class="balls_item balls_small"></div>
<div class="balls_item balls_medium"></div>
<div class="balls_item balls_big"></div>
</div>
<style>
.balls .balls_item {
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
display: block;
position: absolute;
z-index: 0;
margin: auto;
}
.balls .balls_item.balls_small {
width: 67px;
height: 67px;
animation: CircleLeft 60s linear infinite;
}
.balls .balls_item.balls_medium {
width: 218px;
height: 218px;
animation: CircleRight 70s linear infinite;
}
.balls .balls_item.balls_big {
width: 350px;
height: 350px;
animation: CircleLeft 85s linear infinite;
}
.balls.stop_animation .balls_item {
animation-play-state: paused;
}
@keyframes CircleLeft {
from {
transform: rotate(0deg) translate(300px) rotate(0deg);
}
to {
transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
@keyframes CircleRight {
from {
transform: rotate(360deg) translate(200px) rotate(-360deg);
}
to {
transform: rotate(0deg) translate(200px) rotate(0deg);
}
}
</style>
