For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat animasi CSS WaterBob

Hello sobat ICloudzer kali ini admin bakalan memberikan informasi seputar dunia blogging dan blogger, yakni bagaimana sih caranya membuat animasi CSS waterBob diblogge

Info: Baiklah sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Animation WaterBob

WaterBob merupakan nama dari tampilan animasi CSS, yang mana Animasi CSS tersebut bisa digunakan pada seluruh jenis platform yang mendukung CSS dan HTML, seperti blogger dan sejenisnya okay

Fungsi Animation

Setiap kali admin menerangkan animation CSS dalam sebuah artikel, admin tidak lupa lupanya memberitahukan akan setiap fungsi dari animation CSS tersebut

Meskipun dalam penjelasan fungsi dari penggunaan animation CSS selalu sama maknanya namun hal tersebut penting sebagai wawasan dan ilmu, jadi Fungsi dari animation CSS bisa digunakan untuk loading page ataupun hal yang lainnya untuk ditampilkan pada laman page website

Dibuat Menggunakan CSS

Hampir seluruh element animation CSS tersebut dibuat menggunakan kode CSS, seperti namanya yaitu animation CSS in blogger

Jangan heran tampilan animasi tersebut benar benar responsif dan ringat ketika digunakan atau ketika ditampilkan

Contoh Tampilan

Sebagi pelengkap didalam pembahasan kita kali ini, maka admin juga telah menyediakan contoh tampilan dari animation CSS tersebut, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya

Cara pembuatan

Baiklah sekarang saatnya admin bakalan memberikan informasi mengenai cara membuat animasi CSS waterBob diblogger mudah

Kode CSS

Baiklah sobat ICloudzer langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkan kode CSS tersebut tepat diatas kode ]]></b:skin>

.rahObs {
   width: 280px;
   height: 280px;
   margin: 0 auto;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -150px;
   border-radius: 100%;
   -webkit-animation: rahbelok linear 16s infinite;
   -moz-animation: rahbelok linear 16s infinite;
   &:after {
     content: '';
     height: 10px;
     width: 10px;
     border-radius: 50%;
     background: #334455;
     position: relative;
     display: block;
   }
  &:before {
     content: '';
     height: 10px;
     width: 10px;
     border-radius: 50%;
     background: #f80000;
     position: absolute;
      margin-top: -60px;
     display: block;
      -webkit-animation: rahOrbit linear 5s infinite;
     -moz-animation: rahOrbit linear 5s infinite;
     animation: rahOrbit linear 5s infinite;
   }
 }
 .rahObo {
   position: absolute;
   background: #f80000;
 }
 .rahObo:nth-child(1) {
   top: -10px;
   left: -10px;
   width: 250px;
   height: 260px;
   background: #f80000;
   border-radius: 100%;
   -webkit-animation: rahcoolweh linear 3s infinite;
   -moz-animation: rahcoolweh linear 3s infinite;
   animation: rahcoolweh linear 3s infinite;
 }
 .rahObo:nth-child(2) {
   top: 10px;
   left: 10px;
   background: #f80000;
   width: 250px;
   height: 260px;
   border-radius: 100%;
   -webkit-animation: rahleftweh linear 3s infinite;
   -moz-animation: rahleftweh linear 3s infinite;
   animation: rahleftweh linear 3s infinite;
 }
 .rahObo:nth-child(3) {
   top: 10px;
   left: -10px;
   background: #f80000;
   width: 250px;
   height: 260px;
   border-radius: 100%;
   -webkit-animation: rahrightweh linear 3s infinite;
   -moz-animation: rahrightweh linear 3s infinite;
   animation: rahrightweh linear 3s infinite;
 }
@keyframes rahOrbit {
    0% {
     top: 10px;
      opacity: 1;
     transform: rotate(0deg) scale(1);
   }
     50% {
   box-shadow: 0 0 5px rgba(81, 203, 238, 1);
     top: -10px;
       opacity: 0.3;
     transform: rotate(180deg) scale(1.5);
   }
   100% {
    top: 10px;
       opacity: 1;
     transform: rotate(350deg) scale(1);
   }
}
 @keyframes rahcoolweh {
   0% {
     top: 0px;
     transform: rotate(0deg) scale(1);
   }
   50% {
     top: 10px;
     transform: rotate(180deg) scale(1.04);
   }
   100% {
     top: 0px;
     transform: rotate(350deg) scale(1);
   }
 }
 @keyframes rahleftweh {
   0% {
     top: 0px;
     transform: rotate(0deg) scale(1.05);
   }
   50% {
     top: 10px;
     transform: rotate(180deg) scale(1);
   }
   100% {
     top: 0px;
     transform: rotate(350deg) scale(1.05);
   }
 }
 @keyframes rahrightweh {
   0% {
     top: -10px;
     transform: rotate(0deg) scale(1);
   }
   50% {
     top: 0px;
     transform: rotate(180deg) scale(1.02);
   }
   100% {
     top: -10px;
     transform: rotate(350deg) scale();
   }
 }
 @-webkit-keyframes rahbelok {
   0% {
     -webkit-transform: rotate(0deg) skewX(0deg);
   }
   100% {
     -webkit-transform: rotate(-350deg) skewX(0deg);
   }
 }

Info: Atau kamu juga bisa menggunakan tag kode <style>

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini kemudian gunakan sesuai keperluan kamu aja okay

<div class="rahObs">
  <div class="rahObo"></div>
  <div class="rahObo"></div>
  <div class="rahObo"></div>
</div>

Info: Fungsi dari kode html diatas adalah untuk menampilkan fungsi animation CSS tersebut







About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.