Tạo hiệu ứng tuyết rơi trang trí Noel tuyệt đẹp cho Blogspot

Hello xin chào  tất cả các bạn, chào mừng các bạn đã trở lại với blog Bác Sĩ Windows.
Tết Tây gần đến, Noel càng gần hơn, chỉ còn hơn 20 ngày nữa thôi là đến Noel rồi, vì vây nếu bạn muốn trang trí cho blog của bạn có thêm không khí noel thì hãy đọc và thực hiện theo bài viết này.
Bài viết này mình sẽ giới thiệu đến các bạn đoạn CSS và HTML tạo hiệu ứng tuyết rơi tuyệt đẹp cho Blogspot. Đây là hiệu ứng được tạo hoàn toàn từ CSS3, vì vậy sẽ không ảnh hưởng đến tốc độ trang web mà còn làm cho nó rất đẹp nữa!

Các bước thực hiện

Bước 1. Truy cập vào trang chỉnh sửa HTML của Blogspot.
Bước 2. Dán đoạn code này phía trên thẻ </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://2.bp.blogspot.com/-Wy6UPSscdjQ/WiaUVdMxwvI/AAAAAAAAAUU/VlYKpmYGGGskfkn9gc9yKYx-TNKArubPACLcBGAs/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://2.bp.blogspot.com/-cZWwrfEYtMI/WiaUgSmqv6I/AAAAAAAAAUY/fayIXcjKnvoWtHL-x-2H2oO5-Ks2e6_nQCLcBGAs/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>

Bước 3. Lưu mẫu.

Tổng kết

Với một đoạn ngắn CSS và HTML, bạn đã có cho mình một hiệu ứng tuyết rơi vĩnh cửu, làm cho trang blog của bạn thêm đẹp hơn trong những ngày Noel sắp tới!
Code được lấy từ blog cũ vì vậy mình không rõ code gốc nằm ở đâu, mình sẽ bổ sung sau.
Chúc các bạn thành công!
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Trả lời
      1. Tuyết rơi dày đặc thế kia phải lag rồi!

        Xóa
      2. Khó chịu lắm a mà a làm bài viết về phần share đi

        Xóa
      3. Chỉ demo trong bài viết này thôi, kệ đi :v
        Chiều có bài viết nh

        Xóa
    2. Yeah 20 ngày tới noel và 12 ngày tới thi :v

      Trả lờiXóa
      Trả lời
      1. Trước khi nghỉ Tết phải bước qua thứ gọi là “kì thi học kì” :<

        Xóa
    3. Check Ib em phát : FB.com/WhoAm1.info

      Trả lờiXóa
    4. nút back top bị liệt admin ơi :v

      Trả lờiXóa
      Trả lời
      1. Không biết sao nữa, ngoài home còn bấm được mà vô post nó liệt :v

        Xóa
    5. Trả lời
      1. Tự nhiên muốn yêu Trường :v

        Xóa
      2. Thôi đi, comment lên top chứ gì :v

        Xóa
      3. Đâu xitpe toàn nghĩ thế là sao -_- éo comment nữa lè.

        Xóa
      4. Thôi nào thôi nào :vv
        https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

        Xóa
      5. Không yêu trả dép bố về, ok ngồi đây lâu, nóng lắm rồi.

        Xóa
      6. Ơ định mệnh có ai lấy dép bố đâu mà bố đòi :vv

        Xóa
    6. Sửa lại cái BÀI VIẾT CÙNG CHUYÊN MỤC ở Mobile đi bác sĩ

      Trả lờiXóa
    7. . Anh Ơi em mua tem của a đg sài :v Liên Hệ : https://www.facebook.com/Tricker31

      Trả lờiXóa
    8. Nhận xét này đã bị quản trị viên blog xóa.

      Trả lờiXóa
      Trả lời
      1. Thằng này nó rãnh nó đi spam comment này :v

        Xóa
      2. Ủa cmt này mình xoá khi nào thế nhở!?

        Xóa
    9. Công nhận mỗi lần nhảy vào bài này có tuyết nó lag thật

      Trả lờiXóa
      Trả lời
      1. Đấy lag thế bởi tui đâu có dám thêm vào blog.

        Xóa
      2. Ủa mà Adsen ông đâu rồi?

        Xóa
      3. Ông hỏi dùm có ai mua GA ko tui có 2 cái nè!

        Xóa
      4. Ông vô mấy nhóm mua bán GA trên FB ý, nhiều lắm.

        Xóa
      5. cái GA mình chuyển đổi tài khoản đc mà phải ko?

        Xóa
      6. Cái đó tui không biết, nhưng người ta mua GA toàn mua full mail gốc luôn thôi.
        Bán là bán luôn cái tài khoản Google luôn ý.

        Xóa
      7. Vậy ông bán cái GA sao Blog vẫn còn?

        Xóa
      8. Tui reg GA bằng tài khoản khác ông ê không phải tài khoản tạo blog này.

        Xóa
      9. Reg GA bằng tài khoản khác mà đặt lên Blog tài khoản khác nó vẫn hiện à?

        Xóa
      10. Vẫn bình thường mà ông!

        Xóa
      11. Ôi đệt tui lấy tui gắn lên Blog tui được kìa @@

        Xóa
      12. Lạ nhờ, tui nghĩ gắn blog nào cũng hiện chứ, mã quảng cáo đâu liên quan gì đến tài khoản đăng ký.
        Tui gắn khoảng 5p sau là hiện rồi.

        Xóa
      13. Trước giờ tui đâu biết, chứ giờ Reg GA dễ ẹc à, đêm sáng ngày là có kết quả!

        Xóa
    10. Đã xài nó cho Học Bạn chấm vê nờ, haha (Hocban.vn) :v

      https://screenshots.firefoxusercontent.com/images/d7b70a98-1f1f-420a-bc8b-caaced64a6b2.png

      Trả lờiXóa
      Trả lời
      1. Điều, đẹp phết :v có không khí nô-en rầu :v

        Xóa
    11. Nhanh vãi lại sắp lạnh sun vòi dồi :(

      Trả lờiXóa