• ✅ (Đã xác minh)
  • 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.

    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

    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


    Để 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
    <b:if cond='data:blog.pageType not in {"static_page","item"}'>
    // Chèn code tuyết rơi vào đây
    </b:if>

    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!

    6 Comments

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và mạng xã hội

    Facebok Service

    Tăng like, tăng theo dõi Fanpage và Facebook cá nhân

    Blogspot Service

    Thiết kế, tặng template blogspot, miễn phí hosting vĩnh viễn

    Truyền Thông

    Hợp tác nội dung truyền thông, phát triển tin tức mạng

    Unlock Domain

    Nhận mở chặn link chia sẻ trên Facebook giá rẻ

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required