Membuat Animasi Efek Gelembung di Blogger



Hai ges tentunya kalian mungkin ingin agar temapilan blogger anda menarik dengan efek animasi-animasi yang beken dan keren. maka daro itu kali ini saya akan sedikit berbagai tutorial bagaimana cara membuat CSS Animation berbentuk gelembung atau  Bubbles, kalo kita perhatikan banyak ko yang sudah memakai animasi ini yang rata rata mereka mengambil kode CSS nya dari IDNTHEME namun Animasi yang ditampilkan adalah berbentuk kotak.

Lalu seperti apa tampilan animasi bubble itu? ya pokonya gitu dah. sebenarnya zaya sudah pernah pasang di template dulu. namun anda masih bisa melihatnya di beberapa template seperti App Landing Page dari Goomsite atau template redesign lainnya.

untuk membuat CSS Gelembung ini anda hanya perlu copy kan code di bawah ini diatas code ]]></b:skin> atau </style>

/* Animasi Bubbles by Blogscpot.com */
.bubbles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}
.bubbles li{position:absolute;display:block;list-style:none;width:20px;height:20px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:rgba(255,255,255,.13);animation:animateku 45s linear infinite;bottom:-150px;z-index:0}
.bubbles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}
.bubbles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}
.bubbles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}
.bubbles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}
.bubbles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}
.bubbles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}
.bubbles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}
.bubbles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}
.bubbles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}
.bubbles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0s;animation-duration:11s} @keyframes animateku{0{transform:translateY(0) rotate(0);opacity:1;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
100%{transform:translateY(-1000px) rotate(720deg);opacity:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}}

Kemudian silahkan simpan kode di bawah ini sesuai yang anda inginkan

<ul class='bubbles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

Untuk merubah warna bubbles silahkan rubah kode berikut : 
backgroud:rgba(255,255,255,.13)

Nah ges cukup dulu tutorial kali ini semoga animasi bubbles nya bisa diterapkan di blog anda. jika artikel ini menarik silahkan share kepada temannya. Terimakasih

0 Komentar