Hướng dẫn auto zoom image css - tự động phóng to hình ảnh css
Để tạo điểm nhấn trong thiết kế website thì việc sử dụng hiệu ứng phóng to thu nhỏ bằng CSS là quan trọng Show
Trong nhiều dự án thiết kế web của mình, chắc chắn các bạn sẽ gặp phải dùng hiệu ứng phóng to hoặc thu nhỏ một phần tử HTML nào đó, bài viết này sẽ hướng dẫn các bạn cách sử dụng thuộc tính transform: scale(giá trị) trong CSS để thực hiện điều đó. Phóng to, thu nhỏ sử dụng thuộc tính transform: scale(giá trị) trong CSSMì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 khối phần tử 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 chiều cao thích hợp của một phần tử.chiều rộng” và “chiều cao”. Đầu tiên xác định chiều rộng chiều cao thích hợp của một phần tử. Thêm Css vào phần tử HTMLChúng ta cần sử dụng @keyframes để xác định animation HTML
Sau đây là code css để tạo hiệu ứng: CSS Trong khi sử dụng thuộc tính transform: scale(giá trị) trong CSS thì với giá trị là: giá trị < 1: Thu nhỏ đối tượng.giá trị = 1: Giá trị mặc định của đối tượng.giá trị > 1: Phóng to đối tượng. Bây 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é HTML
CSS
.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 transform: scale(giá trị) trong CSS thì với giá trị là:giá trị < 1: Thu nhỏ đối tượng.giá trị = 1: Giá trị mặc định của đối tượng.giá trị > 1: Phóng to đối tượng. HTML
CSS
Trong khi sử dụng thuộc tính transform: scale(giá trị) trong CSS thì với giá trị là:giá trị < 1: Thu nhỏ đối tượng.giá trị = 1: Giá trị mặc định của đối tượng.giá trị > 1: Phóng to đối tượng. HTML
CSS
Trong khi sử dụng thuộc tính transform: scale(giá trị) trong CSS thì với giá trị là:giá trị < 1: Thu nhỏ đối tượng.giá trị = 1: Giá trị mặc định của đối tượng.giá trị > 1: Phóng to đối tượng. HTML
CSS
.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 transform: scale(giá trị) trong CSS thì với giá trị là: HTML 0Sau đây là code css để tạo hiệu ứng: 1CSS
HTML 2CSS 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); } }Trong khi sử dụng thuộc tính transform: scale(giá trị) trong CSS thì với giá trị là: Bài viết này đã giúp ích cho bạn? |