Cara Membuat CSS Animasi Bubbles di Blogger - Hendrix Cat

    Social Items

Hendrix Cat

Metaltaila.co Adalah Blog Berbagi Template Premium

Hai sobat kali ini saya akan sedikit berbagai tutorial bagaimana cara membuat CSS Animation berbentuk 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? nah bisa anda lihat dan perhatikan pada footer 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>
Untuk merubah warna bubbles silahkan rubah kode berikut : backgroud:rgba(255,255,255,.13)
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

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 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? nah bisa anda lihat dan perhatikan pada footer 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>
Untuk merubah warna bubbles silahkan rubah kode berikut : backgroud:rgba(255,255,255,.13)
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
Load Comments

Subscribe Our Newsletter

Notifications

Disqus Logo