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é.
Tự động thay đổi hình nền cho Blog sử dụng CSS3
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.
Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Bình Luận