Tạo hiệu ứng rung lắc animation cho mọi đối tượng

Tạo hiệu ứng rung lắc cho mọi đối tượng

Hello, chào mừng các bạn đến với bài viết tiếp theo của Code Pro. Hôm nay, mình sẽ hướng dẫn các bạn tạo hiệu ứng rung lắc cho mọi đối tượng.

Tạo hiệu ứng rung lắc cho mọi đối tượng
Hiệu ứng rung lắc cho mọi đối tượng

Lấy ý tưởng từ chiếc chuông rung lắc () mình đã viết một đoạn CSS sử dụng hiệu ứng Animation để tạo chuyển động (rung lắc) cho một đối tượng bất kỳ!

Hướng dẫn

Source code

  • Copy embedded code dưới đây:
<link rel="stylesheet" href="https://cdn.leanhduc.pro.vn/utilities/animation/shake-effect/style.css"/>
  • Dán embedded code đã copy phía trên vào trước thẻ đóng </head> hoặc </body>
  • Lưu lại

Cách sử dụng

Để đử dụng hiệu ứng rung lắc các bạn gọi đến class="rung", ví dụ:

<div class="rung">
	<!-- object -->
</div>

Một số ví dụ và code thực tế




<i class="fad fa-crow rung"></i>
<i class="fad fa-campfire rung"></i>
<i class="fad fa-birthday-cake rung"></i>
<i class="fad fa-ear rung"></i>
<i class="fad fa-corn rung"></i>
<i class="fad fa-cookie-bite rung"></i>

Lời kết

Trên đây là toàn bộ hướng dẫn tạo và sử dụng hiệu ứng rung lắc animation. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn thành công và có một ngày làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Code Pro
Bài viết liên quan: