Membuat Animasi Circle Melayang Di Blog Dengan CSS

Cara Membuat dan Memasang Efek Animasi Circle Melayang Di Blog Dengan CSS - Efek animasi circle yang melayang-layang ini merupakan salah satu efek animasi yang sering digunakan oleh para desainer template blogger. Biasanya efek animasi circle melayang ini di pasang di bagian header blog, footer dan navigasi menu di blog.

Bagi kamu yang sangat menyukai dan mengutamakan desain blog, animasi circle melayang ini cocok banget buat di pasang di blog kamu. Selain bagus untuk tampilan dan desain blog, efek animasi circle melayang ini juga dapat menarik perhatian para pengunjung blog kamu agar mereka merasa nyaman dan betah lama-lama di blog kamu.

Itu artinya jika pengunjung blog kamu suka dengan desain blog kamu dan betah lama-lama membaca artikel-artikel yang kamu buat, pastinya ini akan meningkatkan jumlah waktu kunjungan di blog kamu dan  meningkatkan penghasilan blog kamu dari Adsense.

Apakah Efek Animasi Circle Melayang Memberatkan Loading Blog?

Masalah memberatkan atau tidaknya sih adalah hal yang pasti. Pasalnya efek animasi ini menggunakan CSS sebagai style atau desainnya. Namun kamu jangan khawatir, karena CSS ini sudah di optimalkan agar tetap ringan dan tidak menggangu performa loading blog kamu.

Cara Membuat dan Memasang Efek Animasi Circle Melayang Di Blog

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme ➤ Edit HTML
3. Kemudian tambahkan CSS dibawah ini sebelum ]]></b:skin> atau </style> (tergantung template yang digunakan)

   /* animasi circle by Dzuhalah */
   ul.circles{height:340px}
   .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(3,155,229,0.6);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%}}

   Pada tulisan height:340px; merupakan ukuran bingkai dari animasi circle. Kemudian pada tulisan rgba(3,155,229,0.6) merupakan warna dari animasi circle yang akan tampil. Dan tulisan yang ditandai palimg terakhir adalah border radius dari animasi circle tersebut. Kamu bisa ubah dan kostumisasikan sendiri sesuai selera kamu.
4. Kemudian untuk kode pemanggil dari CSS tadi, tambahkan kode dibawah ini di tempat kamu ingin menampilkan efek animasi circle melayang ini. Contohnya kamu bisa memasang di bagian header blog (paling umum), footer, nav-bar atau yang lainnya

   <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. Langkah terakhir klik simpan jika semua kode sudah di tambahkan ke dalam template kamu

Selain efek animasi circle diatas, masih ada animasi lain yang bisa kamu coba. Efek animasi yang ke dua ini adalah efek animasi berbentuk bubble yang melayang-layang ke atas. Dari sisi efek dan fungsinya hampir sama dengan animasi circle diatas. Namun yang membedakannya adalah bentuk doang

Untuk cara memasang efek animasi bubble ini juga sama seperti efek animasi circle diatas. Taruh CSS di template blog kamu ke dalam ]]></b:skin> atau </style>

/* Animasi Bubbles By BokBan */
.bg-bubbles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.bg-bubbles li{position:absolute;list-style:none;display:block;width:40px;height:40px;background-color:rgba(255,255,255,0.15);border-radius:99em;bottom:-160px;animation:square 25s infinite;transition-timing-function:linear}
.bg-bubbles li:nth-child(1){left:10%}
.bg-bubbles li:nth-child(2){left:20%;width:80px;height:80px;animation-delay:2s;animation-duration:17s}
.bg-bubbles li:nth-child(3){left:25%;animation-delay:4s}
.bg-bubbles li:nth-child(4){left:40%;width:60px;height:60px;animation-duration:22s;background-color:rgba(255,255,255,0.15)}
.bg-bubbles li:nth-child(5){left:70%}
.bg-bubbles li:nth-child(6){left:80%;width:120px;height:120px;animation-delay:3s;background-color:rgba(255,255,255,0.1)}
.bg-bubbles li:nth-child(7){left:32%;width:160px;height:160px;animation-delay:7s}
.bg-bubbles li:nth-child(8){left:55%;width:20px;height:20px;animation-delay:15s;animation-duration:40s}
.bg-bubbles li:nth-child(9){left:25%;width:10px;height:10px;animation-delay:2s;animation-duration:40s;background-color:rgba(255,255,255,0.2)}
.bg-bubbles li:nth-child(10){left:90%;width:160px;height:160px;animation-delay:11s}
@keyframes square{0%{transform:translateY(0)}100%{transform:translateY(-700px) rotate(600deg)}}

Kemudian salin dan taruh HTML dibawah di tempat kamu ingin memasang efek animasi melayang ini.

<ul class="bg-bubbles">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

Result Animasi Circle   

Nah, itulah tutorial cara membuat dan memasang efek animasi circle melayang di blog dengan CSS yang dapat saya sampaikan di artikel kali ini. Semoga artikel ini bisa bermanfaat dan membantu bagi yang membutuhkan.

Cindy NOTHING!!!

Share :