Cơ Hội Kiếm Tiền
Android
iOS
Thủ Thuật Hay
- Lúc: 20:07:00
Code Zoom ảnh lớn hợn khi hơ chuột bằng CSS3. Code CSS zoom ảnh khi hơ chuột vào ảnh. Code phóng to ảnh khi hơ chuột vào bằng CSS.
Sau đây Bít Tuốt xin chia sẻ với các bạn Code Zoom ảnh lớn hơn khi hơ chuột bằng CSS3
- transform: scale(x,y) - theo đó x, y là các giá trị ta muốn phóng lên theo trục x và y, thường thì ta để x = y để bức ảnh được phóng to mà vẫn giữ nguyên tỉ lệ. Chẳng hạn transform: scale(2,2) sẽ làm bức ảnh phóng to lên 2 lần
- transition: all 1s ease - theo đó chúng ta sẽ làm bức ảnh được phóng to dần dần trong khoảng thời gian 1s chứ không bụp một cái to lên luôn
Và giờ là code mẫu:
Các tiền tố như: -webkit, -moz, -o, -ms là để phù hợp với các trình duyệt khác nhau.
Chúc các bạn thành công !
Nguồn bài viết được dịch từ website: http://www.mybloggertricks.com/ . Nguồn bài viết không có gì để giải thích thêm hết !
Sau đây Bít Tuốt xin chia sẻ với các bạn Code Zoom ảnh lớn hơn khi hơ chuột bằng CSS3
Ảnh đề mô
Để Zoom ảnh lớn hơn khi hơ chuột chúng ta sẽ áp dụng 2 thuộc tính của CSS3:- transform: scale(x,y) - theo đó x, y là các giá trị ta muốn phóng lên theo trục x và y, thường thì ta để x = y để bức ảnh được phóng to mà vẫn giữ nguyên tỉ lệ. Chẳng hạn transform: scale(2,2) sẽ làm bức ảnh phóng to lên 2 lần
- transition: all 1s ease - theo đó chúng ta sẽ làm bức ảnh được phóng to dần dần trong khoảng thời gian 1s chứ không bụp một cái to lên luôn
Và giờ là code mẫu:
<style type='text/css'>
img {
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
img:hover {
transform: scale(2,2);
-webkit-transform: scale(2,2);
-moz-transform: scale(2,2);
-o-transform: scale(2,2);
-ms-transform: scale(2,2);
}
</style>
Đoạn code trên có nghĩa là mọi hiệu ứng chuyển đổi sẽ diễn ra trong vòng 1s, hiệu ứng sẽ xảy ra khi hover qua ảnh và làm bức hình tăng kích thước lên 2 lần.img {
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
img:hover {
transform: scale(2,2);
-webkit-transform: scale(2,2);
-moz-transform: scale(2,2);
-o-transform: scale(2,2);
-ms-transform: scale(2,2);
}
</style>
Các tiền tố như: -webkit, -moz, -o, -ms là để phù hợp với các trình duyệt khác nhau.
Chúc các bạn thành công !
Nguồn bài viết được dịch từ website: http://
Đánh Giá Bài Viết Đễ Ad Cải Thiện Nội Dung Chất Lượng Bài Viết
0 nhận xét