Demo sederhana ini menjelaskan cara menggunakan animasi CSS untuk efek visual yang menarik.

Menambahkan latar belakang animasi ke situs web atau aplikasi Anda dapat berkontribusi pada desain yang unik dan menarik. Latar belakang kreatif dapat membangkitkan emosi dan meningkatkan pengalaman pengguna.

Ada banyak cara untuk membuat latar belakang animasi untuk aplikasi Anda, namun kombinasi sederhana antara HTML biasa dan CSS akan bekerja dengan baik. Lihat contoh ini, pelajari cara kerja kodenya, dan lihat demo langsung dari latar belakang animasi akhir.

Buat Struktur HTML

Anda akan membuat latar belakang warna biru dengan gelembung yang tumbuh dan melayang ke atas. Anda dapat melihat hasil akhirnya di sini kodepen.

Mulailah dengan membuat a bagian dengan kelas pembungkus untuk menampung animasi.

Kemudian, buat 10 div yang akan mewakili gelembung. Di dalam setiap div, buat rentang dengan kelas dot. Kamu bisa pelajari tag HTML penting ini dalam 10 menit jika Anda baru mengenal HTML.

<body>
<sectionclass="wrapper">

<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>

Gaya Dengan Kode CSS

Anda dapat menciptakan sesuatu yang luar biasa efek latar belakang hanya menggunakan HTML. Namun untuk proyek ini, Anda akan menggunakan CSS untuk menata dan menganimasikan latar belakang.

Pertama, atur margin dan padding pada 0 untuk memastikan tidak ada spasi di sekitar latar belakang.

* {
margin: 0;
padding: 0;
}

Kemudian, beri gaya pada bagian induk menggunakan kelas wrapper. Bagian ini akan memiliki lebar dan tinggi 100% untuk memenuhi seluruh halaman. Atur warna latar belakangnya sebagai warna biru dan berikan posisi absolut.

.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}

Gaya H1 dengan posisi absolut juga. Untuk menempatkannya di tengah halaman, mulailah dengan mengatur posisi kiri atas menjadi 50%. Kemudian gunakan terjemahan untuk memindahkannya ke atas dan ke kiri, sehingga pusatnya tepat di tengah.

.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}

Selanjutnya, beri gaya pada div yang berbentuk lingkaran untuk bertindak sebagai gelembung animasi. Berikan setiap div tinggi, lebar, dan batas. Radius perbatasan yang besar memastikan perbatasan berbentuk lingkaran. Juga, atur durasi animasi menggunakan properti animasi CSS.

.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}

Beri gaya pada titik-titik dengan tinggi dan lebar 5px. Berikan titik-titik tersebut radius batas dan latar belakang putih. Posisikan masing-masing secara absolut, dekat dengan kanan atas div induknya.

div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}

Selanjutnya, gunakan pemilih anak ke-n untuk memposisikan setiap div dengan pengaturan berbeda. Anda dapat memberi nama animasinya menghidupkan; Anda akan mendefinisikannya nanti menggunakan @keyframes.

Menggunakan anak ke-n (2) untuk mengatasi yang pertama div sejak anak pertama dari .pembungkus elemen adalah h1.

.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}
.wrapperdiv:nth-child(3) { 
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(4) { 
top: 40%;
left: 40%; 
animation: animate 3slinearinfinite;
}


.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}

Anda dapat memberikan persentase yang lebih tinggi pada div yang lebih rendah sehingga mereka naik ke atas pada interval yang berbeda.

.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}
.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}


.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}

Gunakan @keyframes untuk mengubah dan memutar lingkaran dan titik secara bertahap pada interval yang berbeda. Pada kode berikut, titik-titik berputar 70 derajat dan lingkaran 360. Rotasi ini menciptakan efek gelembung.

@keyframes animate {
 0% {
transform: scale(0) translateY(0) rotate(70deg);
 }
 100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
 }
}

Kamu bisa membuat latar belakang lebih bergaya menggunakan pola CSS. Pola memungkinkan Anda membuat gelombang, kisi, daun, dan pola lainnya untuk membantu Anda membuat animasi yang menakjubkan.

Anda Dapat Menganimasikan Banyak Properti Menggunakan CSS

Anda dapat membuat berbagai jenis animasi menggunakan CSS. Ini termasuk mengubah warna latar belakang dan menunda waktu proses animasi.

Anda juga dapat mengatur seberapa sering suatu animasi harus dijalankan, bahkan hingga tak terbatas. Anda juga dapat mengatur arah pergerakan animasi: maju atau mundur. Sangat menyenangkan bermain-main dengan animasi dan Anda dapat menggunakannya untuk menghidupkan aplikasi Anda.