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

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