Hướng dẫn
Quảng cáo

Tạo hiệu ứng phóng to thu nhỏ trong 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

Bài viết này 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 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ử.
Thêm Css vào phần tử đó
Chúng ta cần sử dụng @keyframes để xác định animation

Ví dụ

<div class="zoom-in-zoom-out"></div>

Sau đây là code css để tạo hiệu ứng:

Ví dụ

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

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Advertisements