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

Anh Trai Nắng
11

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
Tạo hiệu ứng tuyết rơi bằng CSS3.

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

(getButton) #text=(Live Demo) #icon=(link)

Để 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!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

11 Nhận xét

  1. Dùng ảnh vẫn giật nha, trc a dùng rồi. Thay ảnh bằng ký tự đỡ giật hơn

    Trả lờiXóa
  2. Có hiệu ứng vào nó rối hết cả mắt

    Trả lờiXóa
  3. Thêm ngay cho nó có không khí noel 👌

    Trả lờiXóa
  4. Cho e xin liên kết với ạ
    URL: https://codeprocp.blogspot.com/
    Tiêu đề: CODE PRO CP

    Trả lờiXóa
    Trả lời
    1. ok a đặt rồi, mà phải phát triển blog lên nha, a sẽ ghé xem thường xuyên, bỏ bê blog là a gỡ lk nha.

      Xóa
    2. ad ơi e có thay blog mới ạ:
      liên kết:https://logitechur.blogspot.com/
      Tên hiện thị:Logitechur
      ad gỡ cho em cái Code Pro CP Cũ đi ạ

      Xóa
Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu