Cara Membuat CSS Animasi Bubbles di Blogger

Hai sobat kali ini saya akan sedikit berbagai tutorial bagaimana cara membuat CSS Animation berbentuk Bubbles, kalo kita perhatikan banyak ko yang sudah memamkai 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? nah bisa anda lihat dan perhatikan pada header menu di blog ini... hehe keceh kan? sebenarnya nanti anda bebas menempatkan dimanapun yang anda mau.

untuk membuat CSS 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>

Nah sob cukup dulu tutorial kali ini semoga animasi bubbles nya bisa diterapkan di blog anda. jika artikel ini menarik silahkan beri rating yang bagus. Terimakasih