Santai sejenak

Klik (atau tap) huruf-huruf di bawah!!

A K U l a

Dah.. itu je. Sekian dulu. Terimakasih.

HTML view ▼

<div align="center" style="font-family: arial;">Klik (atau tap) huruf-huruf di bawah!!</div><br/>
<div class="word">
  <span>A</span>
  <span>K</span>
  <span>U</span>
  <span>l</span>
  <span>a</span>
</div><br/><br/>
<span style="font-family: arial;">Dah.. itu je. Sekian dulu. Terimakasih.</span><br/>
<style type="text/css">
  .word {
    color: brown;
  font-family: sans-serif;
    text-shadow: #222222 1px 0 8px;
    text-align: center;
  perspective: 1000px; 
}
.word span {
  cursor: pointer;
  display: inline-block;
  font-size: 100px;
  user-select: none;
  line-height: .8;
}
.word span:nth-child(1).active {
  animation: balance 1.5s ease-out;
  transform-origin: bottom left;
}
@keyframes balance {
  0%, 100% {
    transform: rotate(0deg);
  } 
  30%, 60% {
    transform: rotate(-45deg);
  }
}
.word span:nth-child(2).active {
  animation: shrinkjump 1s ease-in-out;
  transform-origin: bottom center;
}
@keyframes shrinkjump {
  10%, 35% {
    transform: scale(2, .2) translate(0, 0);
  } 
  45%, 50% {
    transform: scale(1) translate(0, -150px);
  }  
  80% {
    transform: scale(1) translate(0, 0);
  }
}
.word span:nth-child(3).active {
  animation: falling 2s ease-out;
  transform-origin: bottom center;
}
@keyframes falling {
  12% {
    transform: rotateX(240deg);
  } 
  24% {
    transform: rotateX(150deg);
  }  
  36% {
    transform: rotateX(200deg);
  } 
  48% {
    transform: rotateX(175deg);
  }
  60%, 85% {
    transform: rotateX(180deg);
  }  
  100% {
    transform: rotateX(0deg);
  }
}
.word span:nth-child(4).active {
  animation: rotate 1.5s ease-out;
}
@keyframes rotate {
  20%, 80% {
    transform: rotatex(180deg);
  }  
  100% {
    transform: rotatex(360deg);
  }
}
.word span:nth-child(5).active {
  animation: toplong 1.5s linear;
}
@keyframes toplong {
  10%, 40% {
    transform: translateY(-40vh) scaleY(1);
  }  
  90% {
    transform: translateY(-30vh) scaleY(2);
  }
}
  }
  </style><script>
const spans = document.querySelectorAll('.word span');
spans.forEach((span, idx) => {
  span.addEventListener('click', (e) => {
    e.target.classList.add('active');
  });
  span.addEventListener('animationend', (e) => {
    e.target.classList.remove('active');
  });
  setTimeout(() => {
    span.classList.add('active');
  }, 750 * (idx+1))
});</script>

Tutup