CSS Animation - Tự Động Thay Đổi Màu Nền Theo Thời Gian

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Ba, 18 tháng 12, 2018 -

Animation CSS3 là một framework tuyệt vời được sử dụng rất nhiều trong thiết kế web, nếu ta biết cách tùy biến nó thì sẽ mang lại rất nhiều thủ thuật hay và độc đáo. Bài viết hôm nay mình sẽ dùng framework đó, tùy biến lại bằng cách cho tự thay đổi màu nền theo khoảng thời gian nhất định. Rất đẹp và chuyên nghiệp!


Cách thực hiện


Thêm tất cả CSS này vào template, chỉnh sửa lại mã màu theo ý bạn. 20s là thời gian.

body {
 animation: colorBackground 20s infinite;
 -webkit-animation: colorBackground 20s infinite;
 -moz-animation: colorBackground 20s infinite;
 -o-animation: colorBackground 20s infinite
}
@keyframes colorBackground {
 0% {
  background-color: #fbcf61;
  color: #fbcf61
 }
 20% {
  background-color: #6bd57e;
  color: #6bd57e
 }
 40% {
  background-color: #ff6f6f;
  color: #ff6f6f
 }
 60% {
  background-color: #57cff4;
  color: #57cff4
 }
 80% {
  background-color: #0ed4c8;
  color: #0ed4c8
 }
 100% {
  background-color: #fbcf61;
  color: #fbcf61
 }
}
@-webkit-keyframes colorBackground {
 0% {
  background-color: #fbcf61;
  color: #fbcf61
 }
 20% {
  background-color: #6bd57e;
  color: #6bd57e
 }
 40% {
  background-color: #ff6f6f;
  color: #ff6f6f
 }
 60% {
  background-color: #57cff4;
  color: #57cff4
 }
 80% {
  background-color: #0ed4c8;
  color: #0ed4c8
 }
 100% {
  background-color: #fbcf61;
  color: #fbcf61
 }
}
@-moz-keyframes colorBackground {
 0% {
  background-color: #fbcf61;
  color: #fbcf61
 }
 20% {
  background-color: #6bd57e;
  color: #6bd57e
 }
 40% {
  background-color: #ff6f6f;
  color: #ff6f6f
 }
 60% {
  background-color: #57cff4;
  color: #57cff4
 }
 80% {
  background-color: #0ed4c8;
  color: #0ed4c8
 }
 100% {
  background-color: #fbcf61;
  color: #fbcf61
 }
}

Live Demo



SIBENIT.NET

Tag:
0 Like
2 Comment More Emoticon
2 Nhận xét
Sắp xếp theo

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin