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

đã xuất bản
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

11 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. Anh có thể hướng dẫn chèn link hiện ảnh giống anh Cường được không anh
    https://i.imgur.com/dO0LAXX.jpg

    Trả lờiXóa
    Trả lời
    1. Là chỉ cần cmt link ảnh nó tự động chuyển thành ảnh hay sao em?

      Xóa
    2. Để tí anh viết bài hướng dẫn cho.

      Xóa
  2. Cái này ngon đó, hôm rồi a tìm cái đổi màu chữ trong một câu hoặc một từ theo thời gian mà chưa ra.

    Trả lờiXóa
    Trả lời
    1. Ok giờ thấy rồi đó anh :v

      Xóa
    2. A không rành lắm, cái này biến đổi sao để nó đổi chữ một đoạn text, ví dụ a muốn đổi màu Tiêu đề website Hocban.vn

      Xóa
    3. Vẫn sử dụng code trên, nhưng anh sửa lại những thứ này:
      ~ body sửa thành tên class/id anh muốn áp dụng
      ~ xóa thuộc tính background-color trong CSS đi và chỉnh lại thuộc tính color bằng mã màu anh muốn nó đổi, vậy thôi đó.

      Xóa
    4. Chỉ bỏ cái thuộc tính background đi là được, chỉ giữ lại phần color thôi :v | A thì cứ tưởng cái đoạn đầu nó dành để định dạng background :v

      Làm được rồi nhé gái, a dòm lại nghĩ ra luôn, qua đây mới thấy gái giải đáp :v

      Xóa
    5. Vâng :v cái này nó so easy

      Xóa
Gợi ý cho bạn