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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.