Membuat Animasi Circle dan Bubbles di blog - Susah Tidur

Membuat Animasi Circle dan Bubbles di blog

Membuat Animasi Circle dan Bubbles di blog
Membuat Animasi Circle dan Bubbles di blog - SusahTidur - Halo pada kesempatan kali ini saya akan membagikan 2 animasi Circle dan Bubbles untuk blog kalian biar makin ganteng dan kece. Animasi ini Cukup ringan kok, karena cuma menggunakan CSS tapi kalau kebanyakan CSS ya berat, intinya sesuatu yang berlebihan itu tidak baik ya sob.

Baik kode ini saya dapat melalui Inspect halaman, untuk Circle saya dapat dari blog IDTheme punya mbak Arlina, dan untuk Bubbles sendiri saya dapat dari Template Lunar buatan mbak Arlina juga, maaf ya mbak lancang hehe. Yuk langsung esekusi

Membuat Animasi Circle dan Bubbles di blog

  1. Buka Dashboard Blogger sobat
  2. Masuk menu Tema > Edit HTML 
  3. Silahkan pilih salah satu kode CSS berikut ini, atau keduanya juga bisa dan salin tepat di atas ]]></b:skin> 

    A. Animasi Bubbles
    /* Animasi Bubbles Susahtidur.my.id */
    .bg-bubbles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
    .bg-bubbles li{position:absolute;list-style:none;display:block;width:40px;height:40px;background-color:rgba(255,255,255,0.15);border-radius:99em;bottom:-160px;animation:square 25s infinite;transition-timing-function:linear}
    .bg-bubbles li:nth-child(1){left:10%}
    .bg-bubbles li:nth-child(2){left:20%;width:80px;height:80px;animation-delay:2s;animation-duration:17s}
    .bg-bubbles li:nth-child(3){left:25%;animation-delay:4s}
    .bg-bubbles li:nth-child(4){left:40%;width:60px;height:60px;animation-duration:22s;background-color:rgba(255,255,255,0.15)}
    .bg-bubbles li:nth-child(5){left:70%}
    .bg-bubbles li:nth-child(6){left:80%;width:120px;height:120px;animation-delay:3s;background-color:rgba(255,255,255,0.1)}
    .bg-bubbles li:nth-child(7){left:32%;width:160px;height:160px;animation-delay:7s}
    .bg-bubbles li:nth-child(8){left:55%;width:20px;height:20px;animation-delay:15s;animation-duration:40s}
    .bg-bubbles li:nth-child(9){left:25%;width:10px;height:10px;animation-delay:2s;animation-duration:40s;background-color:rgba(255,255,255,0.2)}
    .bg-bubbles li:nth-child(10){left:90%;width:160px;height:160px;animation-delay:11s}
    @keyframes square{0%{transform:translateY(0)}100%{transform:translateY(-700px) rotate(600deg)}}
    

    B. Animasi Circle
    /* Animasi Circle Susahtidur.my.id */ 
    .circles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0} .circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,0.17);animation:animate 45s linear infinite;bottom:-150px;z-index:0} .circles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s} .circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s} .circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s} .circles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s} .circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s} .circles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s} .circles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s} .circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s} .circles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s} .circles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0s;animation-duration:11s} @keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}
    Dan lihat kode yang saya warnai, silahkan ubah ke warna yang kalian inginkan
  4. Kemudian tambahkan kode pemanggil nya di bawah ini bebas mau di taruh mana sesuai selera sobat. 

    1. Pemanggil Animasi Bubbles
    <ul class="bg-bubbles">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul> 

    2. Pemanggil Animasi Circle
    <ul class="circles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
    Note
    Untuk memperbanyak jumlah Circle atau Bubbles tambahkan kode <li></li> jika mau mengurangi jumlah ya hilangkan beberapa kode <li></li> di atas.


Baik sekiranha cukup tutorial tentang membuat animasi Circle dan Bubbles di blog. Jika masih kurang paham silahkan bertanya di kolom komentar. Sekian dan terimakasih.
"Membuat Animasi Circle dan Bubbles di blog"
Tampilkan Komentar
Sembunyikan Komentar

1 Komentar untuk "Membuat Animasi Circle dan Bubbles di blog"

  1. Cara masukin ke header nya, taruh di kode mana kak? Kode pemanggil bubbles dll ny.

    BalasHapus

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel