tRikSonic
Tema
  • Original
  • Translate

CSS Spin - Membuat Baling-baling Menggunakan CSS

Terakhir diperbarui : 25 Mei 2018 - 07.42

CSS Spin - Membuat Baling-baling Menggunakan CSS

Kali ini ane mau share trik CSS Spin / rotate, seperti artinya CSS Spin Adalah CSS berputar, tuturial kali ini adalah salah satu contoh dari dari dasar membuat CSS Animation, dan bisa di kembangkan lebih dari yang saya share pada tutorial ini
CSS Spinner Example - Spinner CSS Animation

CSS

.Spinners {
   background-color: rgb(110, 133, 195);
   border: 5px solid rgba(155, 167, 167, 0.9);
   border-radius: 50px;
   box-shadow: 0 0 35px #f5b000;
   width: 10px;
   height: 120px;
   margin: 0 auto;
   -moz-animation: spin .6s infinite linear;
   z-index: 2500;
   -webkit-animation: spin .2s infinite linear;
   position: relative;
}

.Spinners-hold {
   background-color: rgb(191, 191, 183);
   border-bottom: 5px solid rgba(250, 251, 252, 0.9);
   border-top: 5px solid rgb(251, 0, 0);
   border-left: 5px solid rgb(47, 27, 27);
   border-right: 5px solid #2fff00;
   border-radius: 50px;
   box-shadow: 0 0 15px #7A7C7E;
   width: 20px;
   height: 20px;
   margin: 0 auto;
   position: relative;
   top: -80px;
   -moz-animation: spinoff .6s infinite linear;
   -webkit-animation: spinoff .3s infinite linear;
   z-index: 2500;
   position: relative;
}

@-moz-keyframes spin {
   0% {
      -moz-transform: rotate(0deg);
   }
   100% {
      -moz-transform: rotate(360deg);
   }
}

@-moz-keyframes spinoff {
   0% {
      -moz-transform: rotate(0deg);
   }
   100% {
      -moz-transform: rotate(-360deg);
   }
}

@-webkit-keyframes spin {
   0% {
      -webkit-transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
   }
}

@-webkit-keyframes spinoff {
   0% {
      -webkit-transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(-360deg);
   }
}

HTML

<div class="Spinners"></div>
<div class="Spinners-hold"></div>
javascript
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.