">Helo sobat IcloudZer memasukinya bulan puasa kami ingin meyampaikan suatu hal, Jika setiap didalam peyampaian kami memiliki kesalahan atau ada yang menyinggung hati pembaca saya mohon maaf sebesar besarnya, sedikit membahas bulan ramadhan kali ini kita berada pada kondisi atau ditengah tengah isu corona virus, semoga tuhan melancarkan apapun juga yang menjadi niat baik kita semua
Oke kali ini saya akan membahas mengenai cara membuat Animasi Circles Responsif pada Tampilan Header blog Terbaru
Apa Animasi Circles
Apa itu Animasi Circles? Animasi Circles adalah animasi bergerak gerak dengan perubahan secara Langsung, biasanya kita akan menjumpai situs blog yang menampilkan animasi Circles seperti pada blog Icloudice.com, tepatnya pada bagian Header
Oke bagaimana cara membuatnya, kita akan menggunakan kode CSS untuk membuat tampilannya dan menggunakan Kode HTML untuk menampilkannya, oke simak baik baik
Cara penerapan
- Login ke akun blogger anda
- Pergi ke Template dan pilih edit HTML
- Salin dan tempelkan kode CSS berikut tepat diatas kode ]]></b:skin>
- Kemudian cari kode seperti ini, lihat seperti contoh berikut
- Selanjutnya tempelkan kode HTML berikut tepat seperti contoh no 4 diatas
/* Animasi Circle Icloudice */
.icloudiceCircles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}
.icloudiceCircles 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}
.icloudiceCircles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}
.icloudiceCircles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}
.icloudiceCircles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}
.icloudiceCircles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}
.icloudiceCircles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}
.icloudiceCircles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}
.icloudiceCircles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}
.icloudiceCircles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}
.icloudiceCircles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}
.icloudiceCircles 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%}}
<div id='header-container'>
<--letakkan kode Html nya disini-->
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Perhatikan kode diatas secara benar dan tidak keliru
<ul class='icloudiceCircles'><li/><li/><li/><li>
</li><li/><li/><li/><li/><li/><li>
</li></ul>
Info: Jika sudah simpan dan lihat bagaimana hasilnya
Begitulah informasi saya Kali ini seputar blogger untuk Selalu memberikan informasi yang bisa membuat atau mempercantik tampilan blog anda semakin menarik serta untuk menambah wawasan kita semua, Terimakasih atas perhatiannya