Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom cho các thành phần trong website bằng HTML, CSS và Javascript nhé
Nội dung chính Hiển thị
- Cách Tạo Hiệu Ứng Zoom CSS
- Cách Tạo Hiệu Ứng Phóng To CSS
- Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng phóng to cho hình ảnh khi người dùng di chuột qua đoạn mã sau nhé
Bên trên là cấu trúc HTML chứa hình ảnh, bao bọc bên ngoài sẽ là thẻ div có lớp, bên trong sẽ có thêm thẻ bao bọc bên ngoài hình ảnh, bạn có thể sử dụng thẻ div, p. tùy ý
Hiệu ứng CSS thay đổi kích thước hình ảnh khi đưa con trỏ chuột vào
Để tạo điểm nhấn trong trang web thiết kế, việc sử dụng hiệu ứng phóng to thu nhỏ bằng CSS là quan trọng
Trong nhiều dự án thiết kế web của mình, chắc chắn rằng các bạn sẽ gặp phải việc sử dụng hiệu ứng phóng to hoặc thu nhỏ bất kỳ phần tử HTML nào trong đó, bài viết này sẽ hướng dẫn các bạn cách sử dụng các thuộc tính biến đổi. scale[value] trong CSS để thực thi điều đó
Phóng to, thu nhỏ sử dụng thuộc tính biến đổi. scale[value] in CSS
Mình sẽ hướng dẫn các bạn cách tạo hiệu ứng phóng to và thu nhỏ cho một phần khối DIV. Để tạo hiệu ứng phóng to thu nhỏ, chúng ta cần tập trung vào hai yếu tố “chiều rộng” và “chiều cao”. Đầu tiên xác định chiều rộng thích hợp cao hơn của một phần tử
Thêm Css vào phần tử HTML
Chúng ta cần sử dụng @keyframes để xác định hoạt ảnhSau đây là mã css để tạo hiệu ứng
.zoom-in-zoom-out { margin: 24px; width: 50px; height: 50px; background: green; animation: zoom-in-zoom-out 2s ease-out infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale[1, 1]; } 50% { transform: scale[1.5, 1.5]; } 100% { transform: scale[1, 1]; } }
Trong khi sử dụng thuộc tính biến đổi. scale[value] in CSS then with value is
giá trị < 1. Thu nhỏ đối tượng.
giá trị = 1. Default value of object.
giá trị > 1. Phóng to đối tượng.Giờ chúng ta sẽ đi vào cách tạo hiệu ứng hover zoom effect bằng một ví dụ khác nhé
Hiệu ứng Zoom
Bạn hãy hover vào thẻ div bên dưới
Bây giờ chúng ta sẽ đi vào việc tạo hiệu ứng phóng to khi người dùng di chuột vào thẻ div có lớp thu phóng bằng CSS nhé.zoom { padding: 50px; background-color: DodgerBlue; transition: transform .2s; width: 200px; height: 200px; margin: 0 auto; } /*Hiệu ứng zoom*/ .zoom:hover { transform: scale[1.5]; }
Các ví dụ Phóng to thu nhỏ khác nhau bằng CSS
Hiệu ứng Zoom-In CSS
Sau đây chúng ta sẽ xem cách tạo hiệu ứng phóng to cho hình ảnh khi người dùng di chuột qua ví dụ sau nhé
Hiệu Ứng Zoom In
Bạn hãy hover vào ảnh bên dưới nhé
.noidung { height: 200px; width: 200px; overflow: hidden; } .zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { transform: scale[1.5]; }
Thuộc tính tràn. ẩn giấu; . Do đó, nó sẽ gây cảm giác phóng to cho người dùng mà vẫn không thay đổi độ rộng của hình ảnhHiệu ứng Zoom-Out CSS
Xem ví dụ về tạo hiệu ứng thu nhỏ bằng HTML và CSS
Hiệu Ứng Zoom Out
Bạn hãy hover vào ảnh bên dưới nhé
________số 8
Ở đây mình sẽ tạo hiệu ứng thu nhỏ bằng cách thay đổi độ rộng và độ cao của hình ảnh khi người dùng di chuộtHiệu ứng Zoom-Rotate CSS
Trong ví dụ này, chúng tôi sẽ kết hợp hai thuộc tính tỷ lệ và xoay để tạo hiệu ứng phóng to nhé
Hiệu Ứng Zoom Rotate
Bạn hãy hover vào ảnh bên dưới nhé
0
Hiệu ứng Zoom-Blur CSSVí dụ về cách tạo hiệu ứng zoom-blur bằng cách kết hợp hai thuộc tính là tỷ lệ và bộ lọc trong CSS
0.zoom-in-zoom-out { margin: 24px; width: 50px; height: 50px; background: green; animation: zoom-in-zoom-out 2s ease-out infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale[1, 1]; } 50% { transform: scale[1.5, 1.5]; } 100% { transform: scale[1, 1]; } }
1.zoom-in-zoom-out { margin: 24px; width: 50px; height: 50px; background: green; animation: zoom-in-zoom-out 2s ease-out infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale[1, 1]; } 50% { transform: scale[1.5, 1.5]; } 100% { transform: scale[1, 1]; } }
Hiệu ứng Zoom-Color CSS
Ví dụ về cách tạo hiệu ứng zoom-color bằng HTML và CSS
2.zoom-in-zoom-out { margin: 24px; width: 50px; height: 50px; background: green; animation: zoom-in-zoom-out 2s ease-out infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale[1, 1]; } 50% { transform: scale[1.5, 1.5]; } 100% { transform: scale[1, 1]; } }
3.zoom-in-zoom-out { margin: 24px; width: 50px; height: 50px; background: green; animation: zoom-in-zoom-out 2s ease-out infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale[1, 1]; } 50% { transform: scale[1.5, 1.5]; } 100% { transform: scale[1, 1]; } }
Kết luận
Qua bài viết này hy vọng bạn đã thành công trong cách sử dụng thuộc tính biến đổi. scale[value] in CSS into your project