Skip to main content
MBOIS

follow us

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.

Bacaan Mbois Lainya :

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar