Cara Membuat Efek Melayang Menggunakan CSS

Cara Membuat Efek Melayang Menggunakan CSS - Hai sobat, pada kesempatan kali ini saya akan membahas tentang Cara Membuat Efek Melayang Menggunakan CSS.

Yang dimaksud melayang disini adalah Membuat gambar dengan efek melayang. Jadi kalau kita dekatkan cursor kita kegambar, nanti gambarnya akan bergerak seolah - olah sedang melayang. Kalau belum ngerti juga ini contoh screenshot nya :

Nah sekarang tau kan? Oke kalau sudah tau saya akan kasih tau tutorialnya

Buat file dengan nama index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Gambar Melayang</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<img class="melayang" src="gambar1.png">
</body>
</html>

Buat file css nya dengan nama style.css


@keyframes melayang {
  0% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(-8px);
  }
}
@keyframes ulangi {
  100% {
    transform: translateY(-8px);
  }
}
.melayang {
  margin: 15px 0 0 15px;
}
.melayang:hover {
  animation-name: melayang, ulangi;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);
}

Result

Cukup Sekian tutorial Cara Membuat Efek Melayang Menggunakan CSS. Kalau ada yang mau ditanyakan silahkan tinggalkan komentar.