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ẻ bodytrong 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; }
}

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh