Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Circle Animation Ddi Blog Dengan Mudah dengan mudah.
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 menempatkannya dimana saja yang kalian mau, tapi kebanyakan blogger menempatkannya kebanyakan di bagian footer dan header saja.
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 Membuat Circle Animation Di Blog Dengan Mudah
- Buka Blog kalian
- Pilih Tema lalu pilih Edit HTML
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* Animasi Circle telatngoding.com */
.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%}}- 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>- 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, Terimakasih telah berkunjung dan jika ada pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Semoga bermanfaat.