Cách tạo hoạt ảnh màu nền vòng lặp đơn giản với CSS

Tìm hiểu cách tạo vòng lặp màu nền động đơn giản với CSS thuần túy bằng cách sử dụng khung hình chính và các thuộc tính hoạt ảnh CSS khác nhau.

Trong ví dụ này, chúng tôi đang nhắm mục tiêu HTML <body> trực tiếp với CSS, nhưng bạn có thể áp dụng ví dụ mã sau cho bất kỳ phần tử, lớp hoặc id HTML nào.

Cách tạo hoạt ảnh màu nền vòng lặp đơn giản với CSS

Mã

Bạn có thể sử dụng bản trình diễn này làm tài liệu tham khảo.

Lưu ý:mã này sẽ không hoạt động trong IE9.

Lập kế hoạch hoạt ảnh của bạn

Ngay cả khi bạn không biết chính xác kết quả của mình như thế nào thì cuối cùng vẫn luôn thực tế khi có ý tưởng về hướng bạn đang đi. Hãy thiết lập một số điều về hoạt ảnh lặp lại trước khi chúng ta bắt đầu viết mã:

Chúng tôi muốn sử dụng bao nhiêu màu nền?
Tổng thời lượng hoạt ảnh sẽ kéo dài trong bao lâu?
Chúng ta nên sử dụng loại hoạt ảnh nào?

Vì mục đích của hướng dẫn này là giúp mọi thứ đơn giản, hãy sử dụng:

5 màu nền khác nhau
Thời lượng 10 giây (mỗi màu hiển thị 2 giây)
Đường cong hoạt ảnh tuyến tính (hoạt ảnh có cùng tốc độ từ đầu đến cuối)

Tôi đã sử dụng Coolers.co để nhanh chóng tạo ra một bảng màu hài hòa cho ví dụ này:

Đây là các màu hex cho hoạt ảnh nền sắp tới của chúng tôi sẽ lặp lại:

màu cam hoàng hôn:#EE6055
aquamarine trung bình:#60D394
xanh lục nhạt:#AAF683
màu vàng êm dịu:#FFD97D
quả quýt sống động:#FF9B85

Bạn không cần phải ghi nhớ tất cả những cái tên đó (chúng được lấy trực tiếp từ Máy làm mát), tôi chỉ thêm chúng để có biện pháp tốt.

Được rồi, bây giờ chúng ta có 5 màu, chúng ta sẽ đưa vào hoạt ảnh lặp lại hiển thị mỗi màu 2 giây.

Tiếp theo, chúng tôi sẽ tạo hoạt ảnh dựa trên kế hoạch của chúng tôi.

Tạo hoạt ảnh CSS lặp lại

Trong CSS, khung hình chính hoạt ảnh hoạt động theo tỷ lệ phần trăm từ 0% thành 100% . Thêm khung hình chính CSS sau vào biểu định kiểu của bạn:

/* Standard syntax */
@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

Bây giờ chúng ta có một thuộc tính khung hình chính được gọi là backgroundColorPalette với 5 khoảng màu, được chia đều từ 0% thành 100% của hoạt ảnh.

Bây giờ đã đến lúc tạo bộ quy tắc CSS của phần tử nội dung, vì vậy chúng tôi có thể lấy bảng màu khung hình chính của mình và đưa nó vào sử dụng.

Thêm các thuộc tính hoạt ảnh CSS sau bên trong bộ quy tắc bộ chọn nội dung của bạn và xem điều gì sẽ xảy ra trong cửa sổ trình duyệt của bạn:

body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Nếu bạn đã làm đúng mọi thứ, bây giờ bạn sẽ có hoạt ảnh màu nền chạy liên tục để chuyển từ màu này sang màu khác một cách mượt mà với khoảng thời gian 2 giây.

Mã

Bạn có thể sử dụng bản demo này như một tài liệu tham khảo.

Cách hoạt động của CSS

Đầu tiên, chúng tôi thêm animation-name và cung cấp cho nó một giá trị của backgroundColorPalette - bây giờ các khung hình chính màu nền mà chúng tôi đã tạo trước đó được gán cho phần tử nội dung.
Chúng tôi sử dụng animation-duration: và đặt cho nó giá trị là 10 giây - hiện tại, tổng thời lượng hoạt ảnh của chúng tôi là 10 giây. Bạn cũng có thể sử dụng mili giây 10000 .
Chúng tôi sử dụng animation-iteration-count và cung cấp cho nó giá trị infinite . Đây là những gì làm cho vòng lặp hoạt ảnh liên tục. Trong CSS, mặc định là 1 chu kỳ hoạt ảnh.
Chúng tôi sử dụng animation-direction và cung cấp cho nó một giá trị là alternate . Điều này làm cho hoạt ảnh phát từ đầu đến cuối và từ cuối đến đầu. Chúng tôi sử dụng giá trị thuộc tính này để tránh một bước nhảy xấu xảy ra nếu bạn sử dụng normal giá trị hướng hoạt ảnh.

Điều cần biết

Theo mặc định, loại đường cong tốc độ hoạt ảnh CSS được đặt thành tuyến tính . Điều này có nghĩa là chúng tôi không phải khai báo thuộc tính trong bộ quy tắc CSS của mình khi chúng tôi muốn sử dụng nó. Đó là lý do tại sao đường cong tốc độ hoạt ảnh trong ví dụ của chúng tôi trước đó chạy tuyến tính.

Tuy nhiên, bạn vẫn có thể muốn thêm animation-timing-function: linear; vào bộ quy tắc CSS của bạn để làm cho mã của bạn diễn đạt hơn - đặc biệt nếu bạn làm việc theo nhóm. Thật khó để nhớ tất cả các giá trị thuộc tính được bật theo mặc định trong CSS.