Cara Terbaru Membuat Circle Animation Di Blog Dengan Mudah

Demo    Mei 04, 2020    Blogger , CSS , HTML    6 comments   

Lapakinfo.net - Pada kesempatan ini saya akan berbagi tutorial tentang Cara Buat Circle Animation Terbaru Di Blog, circle animasi ini memiliki tampilan yang sangat bagus dan sangat cocok buat kalian yang suka mendesain dan mempercantik tampilan blog kalian. Circle animasi ini berbentuk kotak dan bertaburan menggelembung ke udara, kalian bisa cek pada website ini.

Tampilan circle animasi ini sangatlah bagus dan juga sangat recomended buat kalian yang suka merombak desain template blog. Circle animasi ini hanya menggunakan CSS tanpa JavaScript, artinya jika kalian memasang circle animasi di blog kalian itu tidak membuat berat loading blog kalian. Nah, jika kalian ingin memasang Circle animasi ini di blog kalian bisa ikuti langkahnya di bawah ini.

Cara Buat Circle Animation Terbaru Di Blog

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

/* Animasi Circle Lapakinfo.net */
.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%}}

4. Lanjut salin kode di bawah ini kemudian letakan sesuai selera kalian masing - masing

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

5. Simpan template kalian.

Untuk mengubah warna background circle animasi ini silahkan rubah pada bagian background:rgba(255,255,255,0.07)

Bagaimana sangat mudah bukan untuk tutorial Cara Buat Circle Animation Terbaru Di Blog, untuk demonya silahkan lihat blog ini di bagian menu ,navigasi yang terdapat di bagian atas atau header blog. Terimakasih telah berkunjung dan jika ada pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Semoga bermanfaat.