CSS Animation - Tự động thay đổi màu nền theo thời gian đẹp vãi!

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

Bác Sĩ Windows 1
Bác Sĩ Windows 2
- - 0 bình luận - lượt xem
https://pro.bacsiwindows.com/2018/07/css-animation-tu-ong-thay-oi-mau-nen.html

BÌNH LUẬN (0)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé