Cara Membuat Animasi Background Dengan CSS

Animasi merupakan hal yang perlu dalam sebuah tampilan website. Animasi sangat dibutuhkan untuk memberikan kesan menarik bagi pengguna website kita. Pada kasus ini saya ingin membagikan tutorial tentang Cara Membuat Animasi Background Dengan CSS. Ya animasi background sederhana ini nanti bisa sahabat kembangkan lagi agar semakin lebih mantap.

Langsung saja ikuti langkah-langkah dibawah ini untuk membuat Animasi Background Dengan CSS.

Pertama, sahabat buat file html yang berisi code berikut:

<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="content">
		<h3>Animasi Background Pure CSS</h3>
	</div>

Pada code diatas terdapat 3 buah class dimana class:container sebagai parent dari class:circle, jadi class circle ini nanti yang akan dibuat animasi background.

Kedua, sahabat tambahkan stlye CSS untuk membuat animasi y,silahkan ketikkan code berikut:

body,html{height: 100%;width: 100%}
body{margin:0;padding: 0;background: #943131}
.container{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	top:0;
	left: 0;
}
.content{
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.content h3{
	color: #00fff3;
	font-size: 35px;
	text-transform: uppercase;
	border-top: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
}
.circle{
	position: absolute;
	bottom: -100px;
	background: #f2f2f2;
	opacity: 0.5;
	animation: bubble 15s infinite ease;
}
.circle:nth-child(1){
	width: 75px;
	height: 75px;
	border-radius:50%;
	left:7%;
	animation-delay: 1s;
}
.circle:nth-child(2){
	width: 80px;
	height: 80px;
	border-radius:50%;
	left:20%;
	animation-delay: 5s;
}
.circle:nth-child(3){
	width: 62px;
	height: 62px;
	border-radius:50%;
	left:50%;
	animation-delay: 9s;
}
.circle:nth-child(4){
	width: 55px;
	height: 55px;
	border-radius:50%;
	left:90%;
	animation-delay: 2s;
}
.circle:nth-child(5){
	width: 60px;
	height: 60px;
	border-radius:50%;
	left:10%;
	animation-delay: 10s;
}
.circle:nth-child(6){
	width: 55px;
	height: 55px;
	border-radius:50%;
	left:5%;
	animation-delay: 5s;
}
.circle:nth-child(7){
	width: 70px;
	height: 70px;
	border-radius:50%;
	left:30%;
	animation-delay: 9s;
}
.circle:nth-child(8){
	width: 90px;
	height: 90px;
	border-radius:50%;
	left:75%;
	animation-delay: 3s;
}

@keyframes bubble{
	0%{
		bottom: -100px;
		transform: translateX(0);
	}
	25%{
		transform: translateY(50px);
	}
	50%{
		transform: translateX(100px);
	}
	75%{
		transform: translateY(75px);
	}
	100%{
		bottom: 550px;
		transform: translateX(-100px);
	}
}

Baiklah jika sudah simpan file html dan css lalu buka pada browser masing-masing, kemudian lihat hasilnya seperti tampilan dibawah ini:

Demikian pembahasan kali ini tentang Cara Membuat Animasi Background Dengan CSS. Semoga bermanfaat dan sampai jumpa.

terima kasih.

The post Cara Membuat Animasi Background Dengan CSS appeared first on Kursus Website Terbaik.