Grafica si animatii din HTML si CSS. Banner cu animatie cercuri.

Banner cu animatie cercuri

Opt etichete div (cu rol de strat) cu alte opt etichete div in interior compun in cea mai mare parte acest banner animat. Mai exact, "straturile" sunt animate iar efectul este obtinut prin durata animatiei.

Banner cu animatie cercuri

BANNER TEXT

HTML

<div class="circles">
	<div class="circles-area">
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
		<div class="circles-layer">
			<div class="circles-layer-circle circles-layer-circle1"></div>
			<div class="circles-layer-circle circles-layer-circle2"></div>
			<div class="circles-layer-circle circles-layer-circle3"></div>
			<div class="circles-layer-circle circles-layer-circle4"></div>
			<div class="circles-layer-circle circles-layer-circle5"></div>
			<div class="circles-layer-circle circles-layer-circle6"></div>
			<div class="circles-layer-circle circles-layer-circle7"></div>
			<div class="circles-layer-circle circles-layer-circle8"></div>
		</div>
	</div>
	<div class="circles-txt">
		<span>BANNER TEXT</span>
	</div>
</div>

CSS

	.circles,
	.circles-txt{
		display: flex;
	}
		.circles,
		.circles-area{
			height: 200px;
			overflow: hidden;
			position: relative;
		}
		.circles{
			width: 100%;
			min-width: 100px;
			max-width: 1000px;
			background: rgba(0,0,0,0.1);
			margin: auto;
		}
			.circles-area{
				width: 200px;
			}
				.circles-layer{
					width:  calc(100% - 20px);
					height: calc(100% - 20px);
					padding: 10px;
					transform: rotate(0);
					position: absolute;
					animation-timing-function: ease-in-out;
					animation-iteration-count: infinite;
					animation-direction: alternate;
				}
				.circles-layer:nth-child(1){
					transform: rotate(0.1turn);
				}
				.circles-layer:nth-child(2){
					transform: rotate(0.2turn);
					animation-name: circles-layer2;
					animation-duration: 3s;
				}
				@keyframes circles-layer2{
					to{
						transform: rotate(0.25turn);
					}
				}
				.circles-layer:nth-child(3){
					transform: rotate(0.3turn);
					animation-name: circles-layer3;
					animation-duration: 4.5s;
				}
				@keyframes circles-layer3{
					to{
						transform: rotate(0.375turn);
					}
				}
				.circles-layer:nth-child(4){
					transform: rotate(0.4turn);
					animation-name: circles-layer4;
					animation-duration: 6s;
				}
				@keyframes circles-layer4{
					to{
						transform: rotate(0.5turn);
					}
				}
				.circles-layer:nth-child(5){
					transform: rotate(0.5turn);
					animation-name: circles-layer5;
					animation-duration: 7.5s;
				}
				@keyframes circles-layer5{
					to{
						transform: rotate(0.625turn);
					}
				}
				.circles-layer:nth-child(6){
					transform: rotate(0.6turn);
					animation-name: circles-layer6;
					animation-duration: 9s;
				}
				@keyframes circles-layer6{
					to{
						transform: rotate(0.75turn);
					}
				}
				.circles-layer:nth-child(7){
					transform: rotate(0.7turn);
					animation-name: circles-layer7;
					animation-duration: 10.5s;
				}
				@keyframes circles-layer7{
					to{
						transform: rotate(0.875turn);
					}
				}
				.circles-layer:nth-child(8){
					transform: rotate(0.8turn);
					animation-name: circles-layer8;
					animation-duration: 12s;
				}
				@keyframes circles-layer8{
					to{
						transform: rotate(1turn);
					}
				}
					.circles-layer-circle{
						width: calc(50% - 10px);
						height: calc(50% - 10px);
						background: rgba(0, 0, 0, 0.05);
						border: 5px solid whitesmoke;
						border-radius: 50%;
						margin: auto;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
					}
					.circles-layer-circle1{}
					.circles-layer-circle2{
						transform: translate(50%, -50%);
					}
					.circles-layer-circle3{
						transform: translate(-50%, -150%);
					}
					.circles-layer-circle4{
						transform: translate(0, -200%);
					}
					.circles-layer-circle5{
						transform: translate(40%, -390%);
					}
					.circles-layer-circle6{
						transform: translate(40%, -410%);
					}
					.circles-layer-circle7{
						transform: translate(-40%, -510%);
					}
					.circles-layer-circle8{
						transform: translate(-40%, -690%);
					}
			.circles-txt{
				width: calc(100% - 200px - 20px);
				padding: 10px;
				justify-content: center;
				align-items: center;
			}
			.circles-txt > span{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}