Tạo hiệu ứng tuyết rơi trang trí Noel tuyệt đẹp cho Blogspot
/ lúc / 52 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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!

52 nhận xét:

Tính Getter nói...

Cướp cmt đầu!

Tính Getter nói...

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

Trường Nguyễn nói...

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

Tính Getter nói...

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

Star Dũng Blog nói...

Lag thế a

Trường Nguyễn nói...

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

Star Dũng Blog nói...

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

Trường Nguyễn nói...

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

Việt Hưng nói...

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

Trường Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Trường Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Trường Nguyễn nói...

nộ liễu :v

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

Mình yêu nhau đi?

Trường Nguyễn nói...

Gì đây SC :/

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Văn Huy SYSTEM nói...

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

Trường Nguyễn nói...

Ok em

Trường Nguyễn nói...

Ok

Star Cường IT ­ nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

Oke

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

GA bán rồi ông.

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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.

Niệm Style Blog nói...

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ường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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.

Niệm Style Blog nói...

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

Tinh Nguyen nói...

Đã 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ường Nguyễn nói...

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

Đăng nhận xét