Grafica si animatii din HTML si CSS. Banner linii si cercuri.

Banner linii si cercuri

Multe etichete HTML au fost necesare pentru a adauga acele linii intrerupte pe verticala din dreapta. Acest banner este compus din mai multe etichete div cu rol de strat si care "stau" pozitionate unul in fata celuilalt.

Banner linii si cercuri

HTML

<div class="banner">
	<div class="banner-layer">
		<div class="banner-layer-lines-area">
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
			<div class="banner-layer-lines">
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
				<div class="banner-layer-line"></div>
			</div>
		</div>
	</div>
	<div class="banner-layer">
		<div class="banner-layer-fog1"></div>
		<div class="banner-layer-fog2"></div>
	</div>
	<div class="banner-layer">
		<div class="banner-layer-half">
			<div class="banner-layer-circle-area">
				<div class="banner-layer-circle1 banner-layer-circle2-pos1"></div>
				<div class="banner-layer-circle1"></div>
				<div class="banner-layer-circle2 banner-layer-circle2-pos2"></div>
				<div class="banner-layer-circle1 banner-layer-circle2-pos2"></div>
				<div class="banner-layer-circle2"></div>
				<div class="banner-layer-circle2 banner-layer-circle2-pos1"></div>
			</div>
		</div>
		<div class="banner-layer-half">
			<div class="banner-layer-circle-area">
				<div class="banner-layer-circle1 banner-layer-circle2-pos1"></div>
				<div class="banner-layer-circle1"></div>
				<div class="banner-layer-circle2 banner-layer-circle2-pos2"></div>
				<div class="banner-layer-circle1 banner-layer-circle2-pos2"></div>
				<div class="banner-layer-circle2 banner-layer-circle2-pos1"></div>
			</div>
		</div>
	</div>
	<div class="banner-layer">
		<div class="banner-layer-half">
			<div class="banner-layer-main-lines">
				<div class="banner-layer-main-line1"></div>
			</div>
		</div>
		<div class="banner-layer-half">
			<div class="banner-layer-main-lines">
				<div class="banner-layer-main-lines-bottom">
					<div class="banner-layer-main-lines-area">
						<div class="banner-layer-main-lines-area-l1">
							<div class="banner-layer-main-lines-area-l-rectangle"></div>
							<div class="banner-layer-main-lines-area-l-rectangle"></div>
							<div class="banner-layer-main-lines-area-l-rectangle"></div>
						</div>
					</div>
					<div class="banner-layer-main-lines-area">
						<div class="banner-layer-main-lines-area-l2">
							<div class="banner-layer-main-lines-area-l-rectangle"></div>
							<div class="banner-layer-main-lines-area-l-rectangle"></div>
							<div class="banner-layer-main-lines-area-l-rectangle"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="banner-layer">
		<span>Banner Text</span>
	</div>
</div>

CSS

	.banner-layer,
	.banner-layer-lines-area,
	.banner-layer-half,
	.banner-layer-circle-area,
	.banner-layer-main-lines,
	.banner-layer-main-lines-area,
	.banner-layer-main-lines-area-l1,
	.banner-layer-main-lines-area-l2{
		display: flex;
	}
	.banner-layer-lines-area,
	.banner-layer-main-lines-area{
		justify-content: space-between;
	}
	.banner-layer{
		flex-direction: column;
	}
	.banner-layer{
		justify-content: space-between;
	}
	.banner-layer:last-of-type{
		justify-content: center;
	}
	.banner-layer-main-lines-area-l1{
		justify-content: flex-end;
	}
	.banner-layer-main-lines-area-l2{
		justify-content: flex-start;
	}
	.banner-layer:last-of-type,
	.banner-layer-main-lines,
	.banner-layer-circle-area{
		align-items: center;
	}
	.banner-layer{
		position: absolute;
	}
	.banner-layer-main-line1,
	.banner-layer-main-lines-area-l1,
	.banner-layer-main-lines-area-l2{
		background: #9f1c1e;
	}
	.banner-layer-main-line1,
	.banner-layer-main-lines-area-l1,
	.banner-layer-main-lines-area-l2{
		transform: skew(-45deg);
	}

	.banner{
		width: 100%;
		min-width: 100px;
		max-width: 1000px;
		height: 250px;
		background: linear-gradient(90deg, #a1a1a1, #acacac, #c5c4c4, #a7a6a7, #a1a1a1, #acacac);
		font-family: math;
		position: relative;
		margin: auto;
	}
		.banner-layer{
			width: 100%;
			height: 100%;
		}
		.banner-layer:nth-child(1){
			justify-content: flex-end;
		}
			.banner-layer-lines-area{
				width: 200px;
				height: 100%;
				align-self: flex-end;
			}
				.banner-layer-lines{
					width: calc(100% / 15);
				}
					.banner-layer-line{
						width: 2px;
						height: calc(100% / 40 - 2px);
						background: #cdcdcc;
						margin-bottom: 2px;
					}
					.banner-layer-line:last-of-type{
						margin-bottom: 0;
					}
		.banner-layer:nth-child(2){}
			.banner-layer-fog1,
			.banner-layer-fog2{
				width: 100%;
				height: 100%;
				max-height: 200px;
			}
			.banner-layer-fog1{
				background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0));
			}
			.banner-layer-fog2{
				background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.8));
			}
		.banner-layer:nth-child(3){}
			.banner-layer-half{
				width: 100%;
				height: 50%;
				overflow: hidden;
			}
			.banner-layer-half:nth-child(1){
				justify-content: flex-end;
			}
			.banner-layer-half:nth-child(2){
				justify-content: flex-start;
			}
				.banner-layer-circle-area{
					width: 50%;
					height: 100%;
				}
					.banner-layer-circle1,
					.banner-layer-circle2{
						border-radius: 50%;
					}
					.banner-layer-circle1{
						width: 100px;
						height: 100px;
						border: 2px solid rgba(255,255,255,0.8);
					}
					.banner-layer-circle1-pos1{
						width: 50px;
						height: 50px;
					}
					.banner-layer-circle1-pos2{
						width: 70px;
						height: 70px;
					}
					.banner-layer-circle2{
						width: 120px;
						height: 120px;
						background: rgba(255,255,255,0.3);
						margin-left: -80px;
					}
					.banner-layer-circle2-pos1{
						width: 30px;
						height: 30px;
						margin-right: -18px;
					}
					.banner-layer-circle2-pos2{
						width: 100px;
						height: 100px;
						margin-left: -104px;
					}
		.banner-layer:nth-child(4){}
				.banner-layer-main-lines{
					width: 100%;
				}
					.banner-layer-main-lines-bottom{
						width: 100%;
						height: 80px;
					}
						.banner-layer-main-line1{
							width: 70%;
							height: 20px;
							margin-left: -20px;
						}
						.banner-layer-main-lines-area{
							width: 100%;
							height: 50%;
						}
						.banner-layer-main-lines-area:nth-child(2){
							justify-content: flex-end;
						}
							.banner-layer-main-lines-area-l1,
							.banner-layer-main-lines-area-l2{
								height: 100%;
							}
							.banner-layer-main-lines-area-l1{
								width: 70%;
								margin-left: -25px;
							}
								.banner-layer-main-lines-area-l-rectangle{
									width: 20px;
									background: #dc1f26;
									animation: banner-layer-main-lines-area-l-rectangle 30s infinite alternate;
								}
								@keyframes banner-layer-main-lines-area-l-rectangle{
									0%,20%{
										transform: skew(0deg);
									}
									50%,100%{
										transform: skew(70deg);
									}
								}
								.banner-layer-main-lines-area-l-rectangle:nth-child(2){
									margin: 0 5px;
								}
							.banner-layer-main-lines-area-l2{
								width: calc(100% - 70% + 45px);
								margin-right: -20px;
							}
		.banner-layer:last-of-type{
			font-size: 28px;
			font-weight: bold;
		}