Tạo hiệu ứng rung lắc khi rê chuột vào hình ảnh bằng CSS3

views

A+A-

PrintEmail

Hiệu ứng cho hình ảnh bằng CSS3 có rất nhiều. Bài viết này sẽ hướng dẫn bạn tạo ra hiệu ứng rung lắc khi hover (rê chuột) vào tấm ảnh một cách đơn giản nhất, đó là chỉ cần sử dụng CSS3 với keyframes thôi nhé.

Ví dụ đơn giản về hiệu ứng

Bạn hãy thử rê chuột vào tấm hình dưới đây để cảm nhận được hiệu ứng rung lắc như thế nào nhé

Learn how to shake/wiggle an image with CSS.

Hướng dẫn tạo hiệu ứng rung lắc ảnh bằng CSS3

Bước 1: Bạn thêm HTML hình ảnh như sau

<img class="shake-image" src="shake.jpg" />

Bước 2: Thêm CSS sau:

img.shake-image:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s; 
  /* When the animation is finished, start again */
  animation-iteration-count: infinite; 
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Ở đoạn CSS trên các bạn sẽ thấy chúng ta tạo @keyframes có tên là shake và khi người dùng rê chuột vào ảnh sẽ thực hiện hiệu ứng shake có thuộc tính CSS animation: shake 0.5s; rung trong 0.5 giây, thời gian ở đây bạn có thể thay đổi nhé
Và thuộc tính CSSanimation-iteration-count: infinite có nghĩa là lặp lại hiệu ứng

Chuyên Mục : Chia sẻ CSS Hiệu ứng CSS Hiệu ứng rung lắc Shake Image CSS3 Thiết kế website