Seperti yang telah disebutkan diatas, tutorial kali ini hanya menggunakan CSS dan HTML saja alias tanpa js (javascript), jadi anda akan dibuat mudah untuk mempelajari, mempraktekkan, dan memodifikasi kode tersebut untuk ditempelkan pada blog atau website anda.
Bagaimana? apakah anda tertarik untuk mempraktekkannya? Tutorial ini masih kode mentahan saja dari admin, anda bisa memodifikasi sedemikian rupa agar lebih cantik dan menawan.
Berikut tutorial membuat animasi gelembung menggunakan CSS dan HTML
- Silahkan buka notepad anda lalu ikuti instruksi dibawah ini
- Buatlah sebuah batang/struktur dasar web seperti pada umumnya, lihat dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>gelembung</title>
Letakkan kode CSS disini
</head>
<body>
Letakkan kode HTML disini
</body>
</html>
- Hapus tulisan yang berwarna merah lalu ganti dengan kode CSS dibawah ini
<style type="text/css">
body,html{
width: 100%;
height: 100%;
}
body{
margin: 0;
padding: 0;
background: #19b5fe;
}
.bubbels{
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top: 0;
left: 0;
}
.bubble{
position: absolute;
bottom: -100px;
background: #f1f1f1;
border-radius: 50%;
opacity: 0.5;
animation: flying 10s infinite ease-in;
}
.bubble:nth-child(1){
width: 40px;
height: 40px;
left: 10%;
animation-duration: 8s;
}
.bubble:nth-child(2){
width: 20px;
height: 20px;
left: 20%;
animation-duration: 5s;
animation-delay: 1s;
}
.bubble:nth-child(3){
width: 50px;
height: 50px;
left: 35%;
animation-duration: 10s;
animation-delay: 2s;
}
.bubble:nth-child(4){
width: 80px;
height: 80px;
left: 50%;
animation-duration: 7s;
animation-delay: 0s;
}
.bubble:nth-child(5){
width: 35px;
height: 35px;
left: 55%;
animation-duration: 6s;
animation-delay: 1s;
}
.bubble:nth-child(6){
width: 45px;
height: 45px;
left: 65%;
animation-duration: 8s;
animation-delay: 3s;
}
.bubble:nth-child(7){
width: 25px;
height: 25px;
left: 75%;
animation-duration: 7s;
animation-delay: 2s;
}
.bubble:nth-child(8){
width: 80px;
height: 80px;
left: 80%;
animation-duration: 6s;
animation-delay: 1s;
}
.bubble:nth-child(9){
width: 15px;
height: 15px;
left: 70%;
animation-duration: 9s;
animation-delay: 0s;
}
.bubble:nth-child(10){
width: 50px;
height: 50px;
left: 85%;
animation-duration: 5s;
animation-delay: 3s;
}
@keyframes flying {
0%{
bottom: -100px;
transform: translateX(0);
}
50%{
transform: translateX(100px);
}
100%{
bottom: 1080px;
transform: translateX(-200px);
}
}
</style>
- Lalu, hapus tulisan yang berwarna kuning lalu ganti dengan kode HTML dibawah ini
<div class="bubbels">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
- Selanjutnya, simpan file tersebut kedalam perangkat anda dengan format .html
- Lalu jalankan file tersebut menggunakan browser untuk melihat hasilnya
NOTE: Jika anda berniat memasang bubble animation diatas pada sebuah blog maka anda cukup mengambil CSS dan HTMLnya saja tanpa struktur dasar web. Khusus bagian CSSnya anda tinggal membuang kode yang berwarna jingga.
Demikianlah mengenai Cara membuat animasi gelembung menggunakan CSS dan HTML semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.