» » Hiệu ứng tuyết rơi đẹp cho Blogspot

Hiệu ứng tuyết rơi đẹp cho Blogspot

Hiệu ứng tuyết rơi đẹp cho Blogspot
Hiệu ứng tuyết rơi đẹp cho Blogspot

Để blog của bạn thêm xinh hơn :) bạn sẽ cần phải trang trí thêm nhiều hiệu ứng cho nó. Hôm nay mình share cùng mọi người hiệu ứng tuyết rơi đẹp cho Blogspot.
Bước 1 : Đăng nhập vào Blogger Dashboard => Template => Edit Html .
Bước 2 : Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa sau : </body>  rất đơn giản, chỉ cần copy paste đoạn mã dưới đây vào trên thẻ </body> là ok.

Code Hiệu ứng tuyết rơi đẹp cho Blogspot

<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&#8221;);-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>
Ok cuối cùng bạn lưu lại và thử chạy xem kết quả như thế nào nhé. Chúc bạn có một blog đẹp!


Đi lên