Membuat CSS Circle Animation Keren di Blogger

Membuat CSS Circle Animation Keren di Blogger

Halo apa kabar sahabat Wiki Santri, kali ini kita akan mencoba mempercantik template blog dengan menambahkan efek animasi. Tutorial ini salah satu request dari sahabat-sahabat Wiki Santri yang belum sempat saya buatkan.

Animasi CSS ini saya terinspirasi dari blog idntheme.com, sahabat bisa cek blog dengan desain material dan dengan hiasan animasi kotak-kotak pada background judul artikelnya, dan saya penasaran akhirnya dengan terpaksa saya inspect elemen untuk melihat source kode yang Mbak Arlina gunakan dan saya coba pasang di blog Wiki Santri.

Tidak perlu menunggu hujan dan balesan doi yang lama untuk membuat Animasi CSS kotak-kotak ini, mari kita eksekusi :

Langkah pertama, sahabat sudah login ke akun Blogger masing-masing kemudian masuk ke Template > Edit HTML  dan taruh kode ini di atas </style> atau ]]></b:skin>.


/* Animasi Kotak-Kotak */
.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.07);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%}}

Kemudian taruh kode dibawah ini dimanapun yang sahabat kehendaki.

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

Kamu bisa menaruh di balik judul seperti blog ini, atau dijadikan background setiap postingan juga bisa.

Untuk mengganti warna animasi kotak-kotaknya, silahkan ganti kode

 background:rgba(255,255,255,0.07)

Dengan kode warna sesuai dengan kesukaanmu, Animasi ini tidak akan memberatkan loading blog sahabat, karena di buat hanya dari CSS saja tanpa Java Script.

PERHATIKAN!! : semakin banyak kode <li></li> yang kamu terapkan maka semakin banyak juga jumlah kotak-kotak yang akan tampil, sekian selamat mencoba.
Baca Juga
SHARE
Saiful Anwar
Seorang Santri dan pecinta teknologi informasi, Blogger sejak 2013

Related Posts

Subscribe to get free updates

3 komentar

  1. Akhir nya ketemu juga yang saya cari cari .. makasihh min

    BalasHapus
  2. kurang detail penjelasanya. code ini < class='circles'> bla" di taruh di mana yg bener?

    pengenya di setiap postingan ada background itu, kebetulan juga ak pake tme ignilplex juga. sudah lakuin cara di atas tetep ga ada perubahan

    BalasHapus

Posting Komentar

Iklan Tengah Post