Nền hoạt hình hover css

Để 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ử

Add Css into HTML HTML section
Chúng ta cần sử dụng @keyframes để xác định hoạt hình

Sau đâ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

value < 1. Thu nhỏ đối tượng
value = 1. Default value of object
value > 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 ảnh

Hiệ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é
 

     

 

 .noidung {
   height: 200px;
   width: 200px;
   overflow: hidden;
 }
 .zoomout img {
  height: 300px;
   width: 300px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -ms-transition: all 2s ease;
   transition: all 2s ease;
 }
 .zoomout img:hover {
   height: 200px;
   width: 200px;
 }

Ở đâ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ột

Hiệ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é

________số 8_______

 .noidung {
   height: 200px;
   width: 200px;
   overflow: hidden;
 }
 .zoom_rotate img {
   height: 300px;
   width: 300px;
   transition: transform .5s ease-in-out;
 }
 .zoom_rotate img:hover {
   transform: scale(1.8) rotate(-30deg);
 }

Hiệu ứng Zoom-Blur CSS

Ví 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

.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);
  }
}

.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

.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);
  }
}

.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