Hướng dẫn hover css animation - hover css hoạt hình
 Show Tiếp theo các phần chuẩn bị trong bài 12, mình sẽ hướng dẫn hiệu ứng hover với thuộc tính transition. Ngoài ra, thuộc tính position cũng được giới thiệu trong bài này.bài 12, mình sẽ hướng dẫn hiệu ứng hover với thuộc tính transition. Ngoài ra, thuộc tính position cũng được giới thiệu trong bài này.
Video – Hiệu ứng hover với thuộc tính transitionHướng dẫn chi tiếtCó làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. Mục tiêu cần đạtGiải bài tập Phần hover "Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn Các thuộc tính mới Các thuộc tính đã hướng dẫn Kết quả của bài trước Mục tiêu bài này Mục tiêu bài này, hiệu ứng hover với thuộc tính transitionFOLLOW US cũng nằm giữa đường gạch ngang. Giải bài tậpPhần hoverPhần tiêu đềbackground-color Các thuộc tính mớimargin-top Các thuộc tính đã hướng dẫntransition: 0.4s (0.4s là thời gian – 0.4 giây). Thêm transition: 0.4s vào khối icon trước hover và sau hover. Kết quả của bài trước Mục tiêu bài nàytransiton-deplay: thời gian, Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu. Mục tiêu bài này, hiệu ứng hover với thuộc tính transitiontransition-property: width, height. Xác định quá tirn2h chuyển đổi cho các thuộc tính CSS. Khi trỏ chuột vào:transition-duration: thời gian, Quá trình chuyển đổi mất bao nhiêu thời gian. + Các khối icon sẽ đổi sang màu đen.transition-timing-function: ease, ease-in, linear, ease-out-ease-in-out. Xác định tiến trình hiệu ứng. Ví dụ, lúc đầu chậm, lúc sau nhanh… + Vị trị khối được chọn cao hơn các khối khác. + Hiệu ứng hover sẽ diễn ra chậm lại. Phần tiêu đềCác thuộc tính mới display: inline-block để khối vừa có nền ôm sát chữ, vừa hiểu được margin và padding. Các thuộc tính đã hướng dẫnposition để xác định vị trí của khối so với khối bao bọc bên ngoài. Kết quả của bài trước Mục tiêu bài này Mục tiêu bài này, hiệu ứng hover với thuộc tính transition Các thuộc tính mớiCác thuộc tính đã hướng dẫn Kết quả của bài trước Mục tiêu bài này Mục tiêu bài này, hiệu ứng hover với thuộc tính transition Các thuộc tính đã hướng dẫnKết quả của bài trước Mục tiêu bài này Mục tiêu bài này, hiệu ứng hover với thuộc tính transition Khi trỏ chuột vào: + Các khối icon sẽ đổi sang màu đen. + Vị trị khối được chọn cao hơn các khối khác. + Hiệu ứng hover sẽ diễn ra chậm lại. Ngoài ra, dòng chữ FOLLOW US cũng nằm giữa đường gạch ngang. + Thay đổi màu nền bằng background-color + Thay đổi vị trị bằng cách giảm margin-top + Thay đổi tốc độ, thời gian của hiệu ứng hover bằng thuộc tính mới transition: 0.4s (0.4s là thời gian – 0.4 giây). Thêm transition: 0.4s vào khối icon trước hover và sau hover. Các bạn cũng có thể tham khảo thêm một số thuộc tính liên quan đến transition như + transiton-deplay: thời gian, Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu. + transition-property: width, height. Xác định quá tirn2h chuyển đổi cho các thuộc tính CSS. + transition-duration: thời gian, Quá trình chuyển đổi mất bao nhiêu thời gian. + transition-timing-function: ease, ease-in, linear, ease-out-ease-in-out. Xác định tiến trình hiệu ứng. Ví dụ, lúc đầu chậm, lúc sau nhanh… + transition trong bài là thuộc tính tổng hợp của những thuộc tính trên. Ví dụ: transition: height 2s ease 3s; Hướng dẫn chi tiết các bạn xem trong video hướng dẫn nhé.Download + Dùng thuộc tính display: inline-block để khối vừa có nền ôm sát chữ, vừa hiểu được margin và padding.comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web. + Dùng thuộc tính position để xác định vị trí của khối so với khối bao bọc bên ngoài.Like, Share nếu thấy bài viết thú vị. position: relative |
