Nội Dung Chính
[VIDEO TUT]
- Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :
1. Giới thiệu
- Tiếp theo của series về hover hôm nay tôi xin gửi tới các bạn một số hiệu ứng đẹp. Chắc hẳn không ít bạn đã dùng qua yahoo rồi nhỉ và nhớ nút buzz chứ. Hôm nay tôi sẽ tạo hiệu ứng hover buzz. Chúng ta cùng tiến hành nhé
Xem thêm các bài học HTML và css khác tại đây.
2. Demo
- Bắt đầu với HTML:
1 | <a rel="test" class="button buzz">Buzz</a> |
- Tiếp theo là CSS thì trong các phần trước tôi đã giới thiệu với các bạn thuộc tính @keyframes rồi nhỉ. Thì tôi xin nhắc lại thuộc tính @keyframes được dùng để điều khiển hành động của một thành phần. Rồi chúng ta bắt đầu :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @keyframes buzz { 50% { transform: translateX(3px) rotate(2deg); } 100% { transform: translateX(-3px) rotate(-2deg); } } @keyframes buzz { 50% { transform: translateX(3px) rotate(2deg); } 100% { transform: translateX(-3px) rotate(-2deg); } } .buzz { display: inline-block; transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .buzz:hover { animation-name: buzz; animation-duration: .15s; animation-timing-function: linear; animation-iteration-count: infinite; } |
- Ok vậy là đã xong. Giờ có thể kiểm tra trên trình duyệt nhé
3. Lời kết
- Như vậy là tôi đã hướng dẫn cho các bạn thêm một hiệu ứng hover sử dụng @keyframes nữa. Hi vọng các bạn sẽ áp dụng được vào bài tập của mình. Xin chào chúc các bạn học tốt
Tác giả : Hà Trần Vietpro
[Total: 1 Average: 5/5]
