Движущиеся шары на странице

Wed, 27 Nov 2019 23:18:06 +0200

Движущиеся шары на странице, очень приятные. Можно реализовать сколько угодно штук

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

Блог Артемия Аверина, заметки с тегом: html

Движущиеся шары на странице