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.
 |
| 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
Nguồn: https://www.code.pro.vn/2021/06/tao-hieu-ung-rung-lac-animation-cho-moi-doi-tuong.html
