Tạo hiệu ứng tuyết rơi bằng CSS3 cho blogspot hoàn toàn không gây giật lag

Mùa noel tới cũng là lúc các blogger đua nhau trang trí cho blog/website của mình như một thói quen. Tuyết rơi là một hiệu ứng không thể thiếu! Tuy nhiên nếu bạn tích hợp hiệu ứng này bằng script thì khi vào trang người dùng có cảm giác bị giật, đơ, lag rất khó chịu.


Với sự phát triển mạnh mẽ của CSS3, hoàn toàn có thể tạo nên hiệu ứng này mà không cần dùng tới script. Bạn sẽ giảm được tình trạng giật lag nêu trên. Xem demo dưới đây

Live Demo
Để tiến hành tích hợp bạn thực hiện như sau

Đăng nhập vào trang quản trị blog của mình và vào phần chỉnh sửa HTML

Dán đoạn code sau vào trước thẻ đóng </body>

<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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.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>
        <div class='snow foreground layered'></div>
        <div class='snow middleground'></div>
        <div class='snow middleground layered'></div>
        <div class='snow background'></div>
        <div class='snow background layered'></div>
</div>

Lưu mẫu lại và kiểm tra thành quả.

Tùy chỉnh:

• Host 3 link ảnh về về tài khoản của bạn cho an toàn. Nếu xài mặc định mà link ảnh có hỏng thì cmt mình gửi link ảnh mới
• Bạn có thể sử dụng thẻ b:if để quy định khi nào thì tuyết bắt đầu rơi. Ví dụ không muốn nó rơi ở trang bài viết và trang tĩnh

Với thủ thuật đơn giản này bạn đã có thể trang trí cho blog của mình thêm lộng lẫy để đón giáng sinh và năm mới rồi. Good Luck!