Hiệu ứng tuyết rơi blogspot mới nhất

Trước đây mình đã giới thiệu với các bạn Code tạo pháo hoa cho năm mới 2015 .  Và tiếp tục hôm nay mình xẽ tiếp tục hướng dẫn các bạn thêm Hiệu ứng tuyết rơi blogspot mới nhất vào blogspot.

Cách thực hiện

Các bạn vào Bảng quản trị Blogger→Mẫu→Thêm đoạn code sau trước thẻ đóng </body>

<style>.snow-container{position:absolute;height:100vh;width:100%;max-width:100%;top:0;overflow:hidden;z-index:2;pointer-events:none}
.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite}
.snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:15s}
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}
.snow.middleground{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);-webkit-animation-duration:20s;animation-duration:20s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);-webkit-animation-duration:25s;animation-duration:25s}
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}
@-webkit-keyframes snow{
  0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
  100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}
}
@keyframes snow{
  0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
  100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}</style>
<div class='snow-container'><div class='snow foreground'/><div class='snow foreground layered'/><div class='snow middleground'/><div class='snow middleground layered'/><div class='snow background'/><div class='snow background layered'/></div>

Nguồn : iChiaSe.Biz

Tag : Blogspot, Thủ thuật blogspot