Hover trong CSS là gì
Hiệu ứng Hover ảnh CSS3- Cập nhật: 21/07/2021 Hiệu ứng Hover hình ảnh giúp blog, website của bạn trở nên đẹp, ấn tượng hơn với người dùng. Vì thế hôm nay quachquynh.com mời bạn tìm hiểu một số hiệu ứng đẹp khi rê chuột vào ảnh qua bài này 1. Phóng to ảnh khi rê chuột vào Để thực hành được bài này bạn sẽ dùng thuộc tính transform: scale(); Chạy ví dụ sau: (Thực hành trên Codepen tại đây) Như bạn thấy khi hover chuột lên ảnh nhờ transform: scale; nó sẽ nở ảnh ra so với kích thước ban đầu. transition: all 0.5s; chính là độ trễ của chuyển động. Khi đặt giá trị cao hơn độ trễ càng lớn. 2. Hiệu ứng Hover xoay ảnh 360 độ img {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
img:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
3. Làm mờ ảnh khi Hover chuột img {
opacity: 1;
}
img:hover {
opacity: 0.5;
}
4. Hiệu ứng Hover hiện chữ Read more Read more
Kết luận: Qua một số hiệu ứng trên bạn cần lưu ý một số kiến thức như sau Vì đây là CSS3 nên khi viết mã CSS phải thêm -moz : hiển thị trình duyệt Firefox -o : hiển thị tốt trên trình Opera -webkit: hiển thị trên Google Chrome -ms: cho Internet Explorer Với bài viết này bạn đã biết thêm thuộc tính tranform để hover hình ảnh tạo hiệu ứng đẹp mắt rồi phải không. Sau khi đọc xong hãy thực hành ngày đi kẻo quên mất nhé! Chúc thành công! Cùng chủ đề
Category:
Tags: Học CSS Bình luận! HủyXin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. * Bình luận Tên * Email * Trang web
Δ Đọc thêmCanh giữa theo chiều dọc CSSKhi làm web bạn sẽ cần canh giữa các phần tử theo chiều ngang hoặc dọc (Vertical Centering). Với chiều ngang thì có thể dùng Flexbox với juscontent: center hoặc margin: 0 auto hay text-align: Thuộc tính box-sizing trong CSSMột thuộc tính có lẽ ít được mọi người quan tâm trong CSS đó là Box-sizing. Trước đây khi tìm hiểu về CSS thì nó không được chú ý lắm. Nhưng mãi về sau khi CSS là gì? Hướng dẫn cách học CSS hiệu quảKhi nói về lập trình web không thể không nhắc đến HTML và CSS. Đây là 2 ngôn ngữ căn bản dành cho những người mới bắt đầu làm quen về thiết kế website. Bạn Thuộc tính Margin và Padding trong CSSKhi viết code CSS bạn sẽ gặp phải hai thuộc tính thường dùng nhất đó là thẻ margin và padding. Đối với người mới học thường hay sử dụng nhầm lẫn giữa chúng. Vậy làm Thuộc tính Line-height trong CSSLine-height trong CSS là một thuộc tính thường được sử dụng. Nó giúp chúng ta trình bày văn bản đẹp mắt và dễ đọc hơn. Bài viết này bạn sẽ được tìm hiểu về thuộc Hàm var() trong CSSKhi viết mã CSS bạn sẽ thấy rằng các giá trị được lặp đi lặp lại khá nhiều. Điều này thực sự không tốt về mặt tốc độ. Chính vì vậy CSS3 đã được bổ |