TEXT JINGKRAK

Huruf bs menari jingkrak-jingkrak layaknya penari seperti contoh yg ada dibawah ini, keren untuk dicoba bikin kodenya disini cukup mudah hanya menggunakan css dan html kode. ada toolnya yg sudah sy siapkan tanpa harus repot, kalian tinggal ikuti langkah-langkahnya saja.

J I N G K R A K

Congratulation!, document generate succesful. Copy result code below, terimakasih telah menggunakan tool ini.

<!--// Css code  //--!>
<style> 
/*
http://saein.mobie.in Please dont delete this link!
*/
  .jingkrak {
  width: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; 
  overflow-y: hidden;
}

.huruf {
  animation: jingkrak 0.75s cubic-bezier(00.1, 00.2, 00.3, 00.4) infinite alternate;
  display: inline-block;
  transform: translate3d(10, 0, 0);
  margin-top: 0.5em;
  text-shadow:11px 12px 12px rgba(0,0,0,0.2), -1px -1px 1px   #2c3e50, 1px 1px 0  #2c3e50, 3px 3px 0 silver, 4px 4px 0  #2c3e50, 5px 5px 0 silver, 6px 6px 0  #2c3e50, 7px 7px 0 silver, 8px 8px 0  #2c3e50, 9px 9px 0 silver, 10px 10px 0  #2c3e50, 11px 11px 0 silver; color:  black; font-size: 50px; font-family: Libre Baskerville, serif; font-weight: bold;
}

.huruf:nth-of-type(1) {
  animation-delay: 1.1s;
}
.huruf:nth-of-type(2) {
  animation-delay: 1.2s;
}
.huruf:nth-of-type(3) {
  animation-delay: 1.3s;
}
.huruf:nth-of-type(4) {
  animation-delay: 1.4s;
}
.huruf:nth-of-type(5) {
  animation-delay: 1.5s;
}
.huruf:nth-of-type(6) {
  animation-delay: 1.6s;
}
.huruf:nth-of-type(7) {
  animation-delay: 1.7s;
}
.huruf:nth-of-type(8) {
  animation-delay: 1.8s;
}
.huruf:nth-of-type(9) {
  animation-delay: 1.9s; 
}
.huruf:nth-of-type(10) {
  animation-delay: 1.1s; 
}
.huruf:nth-of-type(11) {
  animation-delay: 1.2s; 
}
.huruf:nth-of-type(12) {
  animation-delay: 1.3s;
}
@-webkit-keyframes jingkrak {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
</style>

<!--// Html code  //--!>
<center><div class="jingkrak">
<span class="huruf">J</span>
<span class="huruf">I</span>
<span class="huruf">N</span>
<span class="huruf">G</span>
<span class="huruf">K</span>
<span class="huruf">R</span>
<span class="huruf">A</span>
<span class="huruf">K</span>
</span></div></center>

1.Huruf:

2.Huruf:

3.Huruf:

4.Huruf:

5.Huruf:

6.Huruf:

7.Huruf:

8.Huruf:

9.Warna huruf: