GET LINK
Trong bài viết này mình tiếp tục chia sẻ cho các bạn code hiệu ứng tuyết rơi cực đẹp cho blogspot
(*) Note: Backup lưu lại Template trước khi chỉnh sửa CSS để tránh lỗi chủ đề.
Đầu tiên vào Chủ đề của Blogspot => Tùy chỉnh => Chỉnh sửa HTML
Copy đoạn code bên dưới và dán vào trước thẻ: </b:skin>
<!-- HIỆU ỨNG TUYẾT RƠI -->
<style type='text/css'>
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%}
.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hJNjJalTAYwm88a_9pGHbKIncDBp0ArZICfJTRRl4_fzNZ7thbryv4VHClAZ2XT2buNmSCeTtGPAyzQsbN94QvtB31YYMxv32IC67R_u6vucw_vDgA4hSyH1kq9hP9blMKKh8WQ0WAuX/s1600/snow-effect-_---------BacSiWindows-Com.png ");-webkit-animation-duration:15s;animation-duration:10s}
.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:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVAWa7QpW91kKYxiJTVh8B05AwEq5UCBNnTKnHJUD5m1dULsNFL-KAS_i7SKYny56gEBHEXQm1DG2Yec5xdVfPqmp3_w7cZ7FCrtO6SqOe0MLkIyfDu2r2TTPLM0IUFS1OvCOWkFviU3Q/s1600/snow-effect_-_--------------BacSiWindows-Com.png);-webkit-animation-duration:25s;animation-duration:20s}
.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>
Lưu lại CSS. Thoát ra và kiểm tra.
Nếu có bất kỳ thắc mắc nào bạn hãy để lại comment bên dưới hãy cùng nhau trao đổi thảo luận nhé!
#TienWiki
TAGs:
CSS
