Tự động thay đổi hình nền cho Blog sử dụng CSS3

Trong bài viết trước, mình đã giới thiệu đến các bạn thủ thuật tự động thay đổi màu nền cho blog bằng cách sử dụng CSS3. Trong bài viết này, mình sẽ giới thiệu đến các bạn một thủ thuật tương tự, đó là tự động thay đổi hình nền theo thời gian, hoàn toàn sử dụng CSS.
Cùng xem và thực hiện nhé.

Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Copy và paste đoạn CSS sau vào trước thẻ ]]></b:skin> trong template.

body{-webkit-animation:colorBackground 50s infinite;-moz-animation:colorBackground 50s infinite;-o-animation:colorBackground 50s infinite;}
@keyframes colorBackground{
 0%{background:url(https://2.bp.blogspot.com/-sYM8SiuOVg8/WG3ycP40FvI/AAAAAAAACKU/1R_B2knJSr4OsKgqLi0fGn-dq3-mcnC0ACLcB/s1600/gai-dep-Tet-2017-blogttcn-blogspot-com%2B%252824%2529.jpg) no-repeat fixed center;}
10%{background:url(https://3.bp.blogspot.com/-jBZ7FR_wl9A/WGpufiktPGI/AAAAAAAACFw/W1nPO58vAPEyQkz1C-315GlJjDyz50CeQCLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25287%2529.jpg) no-repeat fixed center;}
20%{background:url(https://3.bp.blogspot.com/-jBZ7FR_wl9A/WGpufiktPGI/AAAAAAAACFw/W1nPO58vAPEyQkz1C-315GlJjDyz50CeQCLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25287%2529.jpg) no-repeat fixed center;}
30%{background:url(https://2.bp.blogspot.com/-wp5c9Ln0T-8/WGpufIIVYaI/AAAAAAAACFk/MAoTyJG06Ocd36df-M0qelbkLCQ3GZS4ACLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25283%2529.jpg) no-repeat fixed center;}
40%{background:url(https://2.bp.blogspot.com/-wp5c9Ln0T-8/WGpufIIVYaI/AAAAAAAACFk/MAoTyJG06Ocd36df-M0qelbkLCQ3GZS4ACLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25283%2529.jpg) no-repeat fixed center;}
50%{background:url(https://4.bp.blogspot.com/-_j7FCOoCe9M/WGj6auEZ0qI/AAAAAAAACDI/M8BpV2gATUM7Vlno1JB2pLkoq52PaInOQCLcB/s1600/happy-new-year_%255Bblogttcn.blogspot.com%255D_2.jpg) no-repeat fixed center;}
60%{background:url(https://4.bp.blogspot.com/-_j7FCOoCe9M/WGj6auEZ0qI/AAAAAAAACDI/M8BpV2gATUM7Vlno1JB2pLkoq52PaInOQCLcB/s1600/happy-new-year_%255Bblogttcn.blogspot.com%255D_2.jpg) no-repeat fixed center;}
70%{background:url(https://2.bp.blogspot.com/-WY-eRo20cCE/WGj5w1i5kaI/AAAAAAAACC8/Jk5E_t-2F0Yv9m96TIf-gjMF2wexQvsXwCLcB/s1600/happy-new-year-gai-dep.jpg) no-repeat fixed center;}
80%{background:url(https://2.bp.blogspot.com/-WY-eRo20cCE/WGj5w1i5kaI/AAAAAAAACC8/Jk5E_t-2F0Yv9m96TIf-gjMF2wexQvsXwCLcB/s1600/happy-new-year-gai-dep.jpg) no-repeat fixed center;}
90%{background:url(https://1.bp.blogspot.com/-Jo_rb1oS6F8/WGpufoOrENI/AAAAAAAACFs/l5iHNyoxJLQzEgGEsoh1qWA4rMNSL8ABwCLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25285%2529.jpg) no-repeat fixed center;}
100%{background:url(https://1.bp.blogspot.com/-Jo_rb1oS6F8/WGpufoOrENI/AAAAAAAACFs/l5iHNyoxJLQzEgGEsoh1qWA4rMNSL8ABwCLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25285%2529.jpg) no-repeat fixed center;}

Tùy chỉnh

• In đậm: link hình ảnh.
• Màu đỏ: thời gian chuyển giữa các ảnh.

Bước 3: Lưu template.