Tạo hiệu ứng tuyết rơi trang trí Noel tuyệt đẹp cho Blogspot
/ lúc / 52 bình luận
Tham gia nhóm BSW Community để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!
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!

BÌNH LUẬN VỀ BÀI VIẾT (52)

avatar
Tính Getter

Cướp cmt đầu!

TRẢ LỜI
avatar
Tính Getter

Mà sao giống thế anh ?
https://goo.gl/73mH9n

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Tính Getter

Chắc là zậy rồi. :v

TRẢ LỜI
avatar
Star Dũng Blog

Lag thế a

TRẢ LỜI
avatar
Trường Nguyễn

Tuyết rơi dày đặc thế kia phải lag rồi!

TRẢ LỜI
avatar
Star Dũng Blog

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Việt Hưng

Yeah 20 ngày tới noel và 12 ngày tới thi :v

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Nguyễn Lương Duy

Check Ib em phát : FB.com/WhoAm1.info

TRẢ LỜI
avatar
Trường Nguyễn

Có gì không vậy, không rep inbox riêng được.

TRẢ LỜI
avatar
Nguyễn Lương Duy

Em hỏi về cái GA ấy mà

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

nút back top bị liệt admin ơi :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Em không muốn nộ liễu anh ạ

TRẢ LỜI
avatar
Trường Nguyễn

nộ liễu :v

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Star Cường IT ­

Mình yêu nhau đi?

TRẢ LỜI
avatar
Trường Nguyễn

Gì đây SC :/

TRẢ LỜI
avatar
Star Cường IT ­

Tự nhiên muốn yêu Trường :v

TRẢ LỜI
avatar
Trường Nguyễn

Thôi đi, comment lên top chứ gì :v

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Nguyễn Lương Duy

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

TRẢ LỜI
avatar
Văn Huy SYSTEM

. Anh Ơi em mua tem của a đg sài :v Liên Hệ : https://www.facebook.com/Tricker31

TRẢ LỜI
avatar
Trường Nguyễn

Ok em

TRẢ LỜI
avatar
Trường Nguyễn

Ok

TRẢ LỜI
avatar
Star Cường IT ­
Bình luận này đã bị quản trị viên xóa. Vui lòng đọc lại nội quy bình luận.
TRẢ LỜI
avatar
Niệm Style Blog

Thằng này nó rãnh nó đi spam comment này :v

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Niệm Style Blog

Xin code bông tuyết rơi BSW

TRẢ LỜI
avatar
Trường Nguyễn

Oke

TRẢ LỜI
avatar
Niệm Style Blog

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ỜI
avatar
Trường Nguyễn

Đấy lag thế bởi tui đâu có dám thêm vào blog.

TRẢ LỜI
avatar
Niệm Style Blog

Ủa mà Adsen ông đâu rồi?

TRẢ LỜI
avatar
Trường Nguyễn

GA bán rồi ông.

TRẢ LỜI
avatar
Niệm Style Blog

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Niệm Style Blog

cái GA mình chuyển đổi tài khoản đc mà phải ko?

TRẢ LỜI
avatar
Trường Nguyễn

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 ý.

TRẢ LỜI
avatar
Niệm Style Blog

Vậy ông bán cái GA sao Blog vẫn còn?

TRẢ LỜI
avatar
Trường Nguyễn

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.

TRẢ LỜI
avatar
Niệm Style Blog

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 à?

TRẢ LỜI
avatar
Trường Nguyễn

Vẫn bình thường mà ông!

TRẢ LỜI
avatar
Niệm Style Blog

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

TRẢ LỜI
avatar
Trường Nguyễn

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.

TRẢ LỜI
avatar
Niệm Style Blog

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

TRẢ LỜI
avatar
Tinh Nguyen

Đã 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ỜI
avatar
Trường Nguyễn

Điều, đẹp phết :v có không khí nô-en rầu :v

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.