Skip to main content
Thông báo
Chào mừng bạn ghé thăm wap TatCa.Yn.Lt của chúng tôi!
Nếu bạn phát hiện thấy có gì bất thường như (vi phạm bản quyền, link die, lỗi code...).
Hãy thông báo cho Admin tại nhóm FaceBook hoặc kênh YouTube: Shared Channel biết để khắc phục ngay...
Chân thành cảm ơn và chúc vui vẻ..!
Tiện ích
Loading...
Tìm kiếm nhanh
Tìm kiếm|Đang Online: (1)

↓↓ Tạo Hiệu Ứng Tuyết Rơi Cho Web/Wap/Blog Bằng CSS3 Animation

* Duy_Doanh
* 23:15, 16/12/2016
view XtCAT -:- 404
0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741729
Visits Today: 9427
This Week: 1170051
This Month: 10557077

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

 lượt xem
Sắp đến giáng sinh rồi, chúng ta cũng nên trang trí cho trang wap/web/blog của mình sinh động hơn tí nhỉ?
Không như những code truyền thống chúng ta phải sử dụng Javascript khá lằng nhằng và phức tạp để tạo nên hiệu ứng tuyết rơi cho wap/web/blog. Nhược điểm là khi chạy sẽ làm nặng trang và đơ đơ rất khó chịu.
Với sự phát triển của css3 thì việc tạo nên hiệu ứng tuyết rơi trở nên đơn giản hơn bằng Animation.

Code này có thể áp dụng cho mọi trang wap/web/blog... Các bạn cứ post bên trên thẻ body là được.
Tạo hiệu ứng bông tuyết rơi cho trang Blopspot CSS3 Snow Animation, Bạn sẽ có một website lung linh đón giáng sinh đấy!

Demo: http://tatca.yn.lt/test/tuyet-roi

Demo ảnh:


Vào việc chính thôi.

Trước tiên copy code này dán vào chỗ nào bạn muốn trong wap/web/blog bạn cũng được.

Code:
<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>
Copy code



Bước 2 bạn copy code này thêm vào CSS wap/web/blog của bạn nhé.

Code:
<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-100;transform:translate3d-100;-webkit-animation:snow linear infinite;animation:snow linear infinite}
.snow.foreground{background-image:url"http:;-webkit-animation-duration:15s;animation-duration:10s}
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}
.snow.middleground{background-image:urlhttp:;-webkit-animation-duration:20s;animation-duration:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:urlhttp:;-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-100;transform:translate3d-100}100%{-webkit-transform:translate3d5;transform:translate3d5}}
@keyframes snow{0%{-webkit-transform:translate3d-100;transform:translate3d-100}100%{-webkit-transform:translate3d5;transform:translate3d5}}
</style>
Copy code


Bước 3 là xem thành quả thôi...

Chúc thành công..!
↑↑ Đánh giá bài viết
Cảm ơn bạn đã đánh giá bài viết này..!
like XtCAT -:- 404
0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741733
Visits Today: 9431
This Week: 1170055
This Month: 10557081

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

  like XtCAT -:- 404
0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741736
Visits Today: 9434
This Week: 1170058
This Month: 10557084

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

XtCAT -:- 404

0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741737
Visits Today: 9435
This Week: 1170059
This Month: 10557085

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

.png" alt="sao" />

like   XtCAT -:- 404
0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741740
Visits Today: 9438
This Week: 1170062
This Month: 10557088

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

  like XtCAT -:- 404
0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741744
Visits Today: 9442
This Week: 1170066
This Month: 10557092

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

XtCAT -:- 404

0: php_network_getaddresses: getaddrinfo failed: Name or service not known
Advertise Here

404 - Page Not Found - Back Home

Total Visits: 44741737
Visits Today: 9435
This Week: 1170059
This Month: 10557085

This site, is built entirely by using XtGem.

XtGem is a visual mobile site building tool, allowing users to create and maintain highly customizable personal mobile sites completely free of charge - and without a need to know any programming language at all!

.png" alt="sao" />

Chia sẻ bài viết ???
- Chia sẻ tới: - facebook - G - Z - T
BBCode:

Link:
Cùng chuyên mục
● Tạo hiệu ứng hoa mai, hoa đào rơi cho Wap/Web/Blog
● Chia sẻ code Ông già Noel để trang trí giáng sinh cho Wap/Web/Blog
● Hướng dẫn tạo pháo hoa cực đẹp mừng năm mới cho Wap/Web/Blog
● Code hiệu ứng sao rơi đẹp
● Tạo Hiệu Ứng Tuyết Rơi Cho Web/Wap/Blog Bằng CSS3 Animation
Bạn đã xem chưa?
● Sau Một Ðêm Ngủ Trọ
● Hướng dẫn làm ảo thuật với Cam và Táo
● Code xóa Đăng kí - Đăng nhập đầu wap
● Chọn chồng như ý
● Sự tích con cóc
Đầu trang - Giới thiệu - Điều khoản - Chính sách - Liên hệ FB
Thống kê truy cập
Copyright © 26/11/2016 - 2019 Duy_Doanh
Thời gian tải trang: 0.0003

The Soda Pop