Cara membuat Objek Bergetar menggunakan CSS - Hai sobat, pada kesempatan kali ini saya akan membahas tentang Cara membuat Objek Bergetar menggunakan CSS.
Baca juga : Cara Membuat Efek Melayang Menggunakan CSS
Ini hampir sama dengan tutorial sebelumnya. Cuma bedanya kalau sebelumnya objeknya melayang, sekarang objeknya bergetar Ini contoh screenshot nya :
Kurang begitu jelas? Biar lebih jelas langsung aja disimak tutorialnya :
- Buat file dengan nama index.html
<!DOCTYPE html> <html> <head> <title>Membuat Objek Bergetar</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <img class="bergetar" src="gambar1.png"/> </body> </html>
- Buat file dengan nama style.css
@keyframes bergetar { 0% { transform: translate(0,0) rotate(0deg) } 2% { transform: translate(6px,-7px) rotate(2.5deg) } 4% { transform: translate(8px,-8px) rotate(2.5deg) } 6% { transform: translate(1px,-8px) rotate(-3.5deg) } 8% { transform: translate(-3px,4px) rotate(-0.5deg) } 10% { transform: translate(0,-3px) rotate(1.5deg) } 12% { transform: translate(-1px,2px) rotate(0.5deg) } 14% { transform: translate(6px,6px) rotate(-1.5deg) } 16% { transform: translate(-7px,4px) rotate(-0.5deg) } 18% { transform: translate(7px,8px) rotate(-3.5deg) } 20% { transform: translate(-6px,2px) rotate(1.5deg) } 22% { transform: translate(9px,5px) rotate(-1.5deg) } 24% { transform: translate(7px,-2px) rotate(0.5deg) } 26% { transform: translate(-7px,-10px) rotate(-0.5deg) } 28% { transform: translate(-10px,-8px) rotate(-1.5deg) } 30% { transform: translate(8px,4px) rotate(0.5deg) } 32% { transform: translate(0,4px) rotate(1.5deg) } 34% { transform: translate(-8px,6px) rotate(-0.5deg) } 36% { transform: translate(-5px,7px) rotate(1.5deg) } 38% { transform: translate(-4px,-4px) rotate(-1.5deg) } 40% { transform: translate(9px,4px) rotate(-1.5deg) } 42% { transform: translate(9px,-5px) rotate(2.5deg) } 44% { transform: translate(-5px,-4px) rotate(-2.5deg) } 46% { transform: translate(7px,-7px) rotate(1.5deg) } 48% { transform: translate(-5px,8px) rotate(0.5deg) } 50% { transform: translate(9px,1px) rotate(-1.5deg) } 52% { transform: translate(-9px,-5px) rotate(-3.5deg) } 54% { transform: translate(-2px,9px) rotate(1.5deg) } 56% { transform: translate(6px,-1px) rotate(1.5deg) } 58% { transform: translate(-6px,0) rotate(-0.5deg) } 60% { transform: translate(3px,1px) rotate(1.5deg) } 62% { transform: translate(5px,-7px) rotate(-0.5deg) } 64% { transform: translate(9px,2px) rotate(2.5deg) } 66% { transform: translate(6px,0) rotate(-2.5deg) } 68% { transform: translate(5px,-4px) rotate(-2.5deg) } 70% { transform: translate(-8px,5px) rotate(-2.5deg) } 72% { transform: translate(-6px,-2px) rotate(0.5deg) } 74% { transform: translate(-3px,7px) rotate(-3.5deg) } 76% { transform: translate(-7px,-8px) rotate(-3.5deg) } 78% { transform: translate(-1px,-2px) rotate(2.5deg) } 80% { transform: translate(8px,6px) rotate(-2.5deg) } 82% { transform: translate(-2px,-9px) rotate(2.5deg) } 84% { transform: translate(8px,-10px) rotate(-0.5deg) } 86% { transform: translate(-6px,0) rotate(2.5deg) } 88% { transform: translate(-1px,9px) rotate(-3.5deg) } 90% { transform: translate(-7px,8px) rotate(1.5deg) } 92% { transform: translate(-10px,-8px) rotate(0.5deg) } 94% { transform: translate(-8px,6px) rotate(1.5deg) } 96% { transform: translate(4px,-9px) rotate(2.5deg) } 98% { transform: translate(-4px,9px) rotate(0.5deg) } } .bergetar { margin: 15px 0 0 15px; } .bergetar:hover { animation-name: bergetar; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: running; }
Sekarang coba sobat buka index.html nya. Lalu arahkan kursornya kearah gambar. Nanti gambarnya akan bergetar - getar.
Cukup Sekian tutorial Cara Membuat Objek Bergetar Menggunakan CSS. kalau ada yang mau ditanyakan silahkan tinggalkan komentar.