Hiệu ứng tự động thay đổi màu nền cho Blogger

        Hôm nay mình sẽ hướng dẫn các bạn thay đổi nền trang Web/Blog bằng nền động với nhiều màu sắc khác nhau bằng cách sử dụng các khung hình CSS. Thay vì sử dụng hình ảnh để làm nền trang Web/Blog làm chậm trang web, bạn có thể chỉ sử dụng CSS với hiệu ứng này để trang trí mà không hề làm giảm hiệu suất tải trang.

Để dễ hình dung các bạn xem demo bên dưới




Các bạn thực hiện các bước sau đây.

Loại bỏ một số mã trùng lặp

Trước hết bạn phải loại bỏ các mã nền hiện có để tránh bất kỳ xung đột CSS. Tìm các thẻ body trong mã nguồn. Tìm những thuộc tính background và xóa bỏ những thuộc tính có giá trị (không được xóa bỏ các thẻ). Các bạn tham khảo hình sau:

Thêm mã nguồn

Các bạn thêm mã nguồn CSS sau trên đoạn ]]> < / b: skin > <

body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}
@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; }
}
@-o-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; }
}