TEXT - KILAT

Tampilan text huruf akan terlihat seperti kilat, kalian bisa membuatnya sendiri disini sesuai keinginan.

C O N T O H

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!
*/
  .kilat {
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.huruf-kilat {
  animation: kilat 2s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  display: inline-block;
  transform: translate3d(0, 0, 0);
  margin-top: 0.5em;
  text-shadow:11px 12px 12px rgba(0,0,0,0.2), -1px -1px 1px darkgray, 1px 1px 0 darkgray, 3px 3px 0 silver, 4px 4px 0 darkgray, 5px 5px 0 silver, 6px 6px 0 darkgray, 7px 7px 0 silver, 8px 8px 0 darkgray, 9px 9px 0 silver, 10px 10px 0 darkgray, 11px 11px 0 silver; color: black; font-size: 50px; font-family: Libre Baskerville, serif; font-weight: bold;
}
.huruf-kilat:nth-of-type(1) {
  animation-delay: 1.1s;
}
.huruf-kilat:nth-of-type(2) {
  animation-delay: 1.2s;
}
.huruf-kilat:nth-of-type(3) {
  animation-delay: 1.3s;
}
.huruf-kilat:nth-of-type(4) {
  animation-delay: 1.4s;
}
.huruf-kilat:nth-of-type(5) {
  animation-delay: 1.5s;
}
.huruf-kilat:nth-of-type(6) {
  animation-delay: 1.6s;
}
.huruf-kilat:nth-of-type(7) {
  animation-delay: 1.7s;
}
.huruf-kilat:nth-of-type(8) {
  animation-delay: 1.8s;
}
.huruf-kilat:nth-of-type(9) {
  animation-delay: 1.9s;
}
.huruf-kilat:nth-of-type(10) {
  animation-delay: 1.10s;
}
@keyframes kilat {
  from,
  -11.1%,
  to {
    -webkit-transform: translate3d(-10, -10, -10);
    transform: translate3d(-10, -10, -10);
  }

12.2% {
    -webkit-transform: skewX(-122.5deg) skewY(-122.5deg);
    transform: skewX(-122.5deg) skewY(-122.5deg);
  }

33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
</style>

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

1.Huruf:

2.Huruf:

3.Huruf:

4.Huruf:

5.Huruf:

6.Huruf:

7.Huruf:

8.Huruf:

9.Warna huruf: