Mẫu CSS hoạt ảnh

Trong CSS Grid, các thuộc tính grid-template-columnsgrid-template-rows cho phép bạn xác định tên dòng và theo dõi kích thước của các hàng và cột lưới tương ứng. Hỗ trợ phép nội suy cho các thuộc tính này cho phép bố cục lưới chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm giữa của hoạt ảnh hoặc chuyển tiếp

Ngày 25 tháng 10 năm 2022

Mẫu CSS hoạt ảnh

Bramus

TwitterGitHubTrang chủ

Trên trang này

Lễ ăn mừng

Tính năng web này hiện có sẵn trong cả ba công cụ trình duyệt

Hỗ trợ trình duyệt chrome 107, Được hỗ trợ 107 firefox 66, Được hỗ trợ 66 edge 107, Supported 107 safari 16, Supported 16

Nội suy giá trị trong CSS

Trong CSS, bạn có thể chuyển đổi trơn tru các thuộc tính từ giá trị này sang giá trị khác bằng cách sử dụng thuộc tính transition

#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}

#target:hover {
opacity: 1;
}

Công cụ kết xuất sẽ tự động phát hiện loại giá trị của thuộc tính được nhắm mục tiêu và sử dụng thông tin đó để chuyển đổi suôn sẻ sang giá trị mới

Ví dụ

  • Chuyển đổi opacity từ 0 sang 1?
  • Chuyển đổi background-color từ white sang
    .avatars {
    display: grid;
    gap: 0.35em;

    grid-auto-flow: column;
    grid-template-columns: repeat(4, 2em);
    transition: all ease-in-out 0.25s;
    }

    .avatars:hover {
    grid-template-columns: repeat(4, 4em);
    }
    0?
  • Chuyển tiếp
    .avatars {
    display: grid;
    gap: 0.35em;

    grid-auto-flow: column;
    grid-template-columns: repeat(4, 2em);
    transition: all ease-in-out 0.25s;
    }

    .avatars:hover {
    grid-template-columns: repeat(4, 4em);
    }
    1?

Điều tương tự cũng áp dụng cho hoạt ảnh CSS, trong đó trình duyệt sẽ thực hiện phép nội suy giá trị giữa các khung hình chính

Khi sử dụng Thuộc tính tùy chỉnh, hãy sử dụng

.avatars {
display: grid;
gap: 0.35em;

grid-auto-flow: column;
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
}

.avatars:hover {
grid-template-columns: repeat(4, 4em);
}
2 để cho biết chúng thuộc loại nào. Bằng cách đó, trình duyệt biết cách chuyển đổi từ giá trị này sang giá trị khác

Nội suy grid-template-columns và grid-template-rows

Cảm ơn những người đóng góp của chúng tôi tại Microsoft, Chrome–kể từ phiên bản 107–có thể nội suy các giá trị grid-template-columnsgrid-template-rows

Bố cục dạng lưới có thể chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm nửa chừng của hoạt ảnh hoặc chuyển tiếp

Trong bản demo bên dưới, một lưới đang hiển thị một số hình đại diện. Để tiết kiệm không gian, các hình đại diện được đặt chồng lên nhau bằng cách giới hạn chiều rộng của mỗi cột bằng cách sử dụng grid-template-columns. Khi di chuột, mỗi cột được cung cấp thêm không gian

Khung CSS nào là tốt nhất cho hoạt hình?

Thư viện hoạt ảnh miễn phí tốt nhất dành cho nhà thiết kế .
AnimeJS
quảng cáo
mo. js
Nền tảng hoạt hình Greenstock (GSAP)
vận tốc. js
csshake
Bay lượn. css
hoạt hình ma thuật

CSS có tốt cho hoạt hình không?

Cả chuyển tiếp CSS và hoạt ảnh đều có thể được sử dụng để viết hoạt ảnh . Mỗi người đều có kịch bản người dùng riêng. Chuyển đổi CSS cung cấp một cách dễ dàng để tạo hoạt ảnh giữa kiểu hiện tại và trạng thái CSS kết thúc, v.v. g. , trạng thái nút nghỉ và trạng thái di chuột.

Tôi có nên tạo hiệu ứng động bằng CSS hay JS không?

Sử dụng hoạt ảnh CSS để chuyển đổi "một lần" đơn giản hơn, chẳng hạn như chuyển đổi trạng thái phần tử giao diện người dùng. Sử dụng hoạt ảnh JavaScript khi bạn muốn có các hiệu ứng nâng cao như nảy, dừng, tạm dừng, tua lại hoặc làm chậm

Hình ảnh CSS có thể hoạt hình không?

Với CSS, bạn cũng có thể tạo các hiệu ứng động, một trong số đó phổ biến là di chuột . Kiểu dáng này, làm thay đổi phần tử đã chọn khi di chuột qua phần tử, tạm thời áp dụng một hiệu ứng hình ảnh khác. Ví dụ: bạn có thể thay đổi hình ảnh hoặc kích thước của hình ảnh hoặc hiển thị văn bản trên đó.