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!
  1. Trả lời
    1. Mà sao giống thế anh ?
      https://goo.gl/73mH9n

      Xóa
    2. Chắc lấy code cùng một chỗ đó em

      Xóa
    3. Chắc là zậy rồi. :v

      Xóa
  2. 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
  3. 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
  4. Check Ib em phát : FB.com/WhoAm1.info

    Trả lờiXóa
    Trả lời
    1. Có gì không vậy, không rep inbox riêng được.

      Xóa
    2. Em hỏi về cái GA ấy mà

      Xóa
    3. Xùy, thì hỏi ở đây luôn có gì phải inbox riêng.

      Xóa
    4. Em không muốn nộ liễu anh ạ

      Xóa
  5. 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
  6. 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
  7. 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
  8. . Anh Ơi em mua tem của a đg sài :v Liên Hệ : https://www.facebook.com/Tricker31

    Trả lờiXóa
  9. 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
  10. 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
  11. Đã 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
CÓ THỂ BẠN ĐANG TÌM