Membuat Animasi Loop Squares HTML CSS

Sharing Teknologi – Membuat Animasi Loop Squares HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Loop Squares HTML CSS Di WordPress. 

CSS adalah singkatan dari Cascading Style Sheets, yang mana ada 3 versi: CSS1, CSS2 dan CSS3. CSS adalah aturan untuk mengelola banyak elemen pada halaman web agar lebih terstruktur dan konsisten.

CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal yang berkaitan dengan desain web. CSS3 memiliki kemampuan untuk membuat animasi warna menjadi animasi 3D pada halaman web.

CSS sangat membantu meningkatkan tampilan dan nuansa halaman web seperti memberikan warna, bayangan kotak, padding, margin, perataan, posisi, dan efek pengetikan atau ketukan. HTML (HyperText Markup Language) merupakan bahasa markup yang saat ini paling dominan dalam hal pembuatan website.

Dengan HTML, sebuah halaman web dapat dibuat sedemikian rupa sehingga menjadi lebih interaktif dan menarik. Karena HTML menggabungkan berbagai elemen seperti teks, multimedia, link, dan elemen pendukung lainnya menjadi satu kesatuan. 

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animate  Loop Squares Menggunakan HTML CSS. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Loop Squares

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

HTML

<div class="loopsquares position-relative p-3 my-1">
<div class="container">
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
	<div class="frame"></div>
</div>

Style CSS

.loopsquares {
	min-height: 700px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: #001122;
}

.loopsquares .container {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 30px;
}

.loopsquares .frame {
	width: 700px;
	height: 700px;
	position: absolute;
	border-radius: 50px;
	border: 5px solid #0ff;
	box-shadow: 0 0 10px #0ff,
		0 0 30px #0ff;
	animation: zooming 4s linear infinite alternate;
}

.loopsquares .frame:nth-child(1) {
	transform: rotate(40deg) translateY(0px) translateZ(0px);
	opacity: 1;
	animation-delay: -1s;
}

.loopsquares .frame:nth-child(2) {
	transform: rotate(40deg) translateY(50px) translateZ(-10px);
	opacity: 0.9;
	animation-delay: -1.3s;
}

.loopsquares .frame:nth-child(3) {
	transform: rotate(40deg) translateY(100px) translateZ(-20px);
	opacity: 0.85;
	animation-delay: -1.5s;
}

.loopsquares .frame:nth-child(4) {
	transform: rotate(40deg) translateY(150px) translateZ(-30px);
	opacity: 0.8;
	animation-delay: -1.7s;
}

.loopsquares .frame:nth-child(5) {
	transform: rotate(40deg) translateY(200px) translateZ(-40px);
	opacity: 0.75;
	animation-delay: -1.9s;
}

.loopsquares .frame:nth-child(6) {
	transform: rotate(40deg) translateY(250px) translateZ(-50px);
	opacity: 0.7;
	animation-delay: -2.1s;
}

.loopsquares .frame:nth-child(7) {
	transform: rotate(40deg) translateY(300px) translateZ(-60px);
	opacity: 0.65;
	animation-delay: -2.3s;
}

.loopsquares .frame:nth-child(8) {
	transform: rotate(40deg) translateY(350px) translateZ(-70px);
	opacity: 0.6;
	animation-delay: -2.5s;
}

.loopsquares .frame:nth-child(9) {
	transform: rotate(40deg) translateY(400px) translateZ(-80px);
	opacity: 0.5;
	animation-delay: -2.7s;
}

.loopsquares .frame:nth-child(10) {
	transform: rotate(40deg) translateY(450px) translateZ(-90px);
	opacity: 0.4;
	animation-delay: -2.9s;
}

.loopsquares .frame:nth-child(11) {
	transform: rotate(40deg) translateY(500px) translateZ(-100px);
	opacity: 0.3;
	animation-delay: -3.1s;
}

.loopsquares .frame:nth-child(12) {
	transform: rotate(40deg) translateY(550px) translateZ(-110px);
	opacity: 0.2;
	animation-delay: -3.3s;
}

.loopsquares .frame:nth-child(13) {
	transform: rotate(40deg) translateY(600px) translateZ(-120px);
	opacity: 0.1;
	animation-delay: -3.5s;
}

.loopsquares .frame:nth-child(14) {
	transform: rotate(40deg) translateY(650px) translateZ(-130px);
	opacity: 0.05;
	animation-delay: -3.7s;
}

@keyframes zooming {
	0% {
		transform: scale(0.2) rotate(40deg);
		opacity: 1;
	}
	
	100% {
		transform: scale(1) rotate(180deg);
		opacity: 0;
	}
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.