Polly po-cket
TatCa.Yn.Lt
Skip to main content
toggle navigation
Menu nhanh
Chính sách
Nội quy
Công cụ tiện ích
Tool soi mã nguồn
Công cụ tạo mã màu, test mã màu, lấy mã màu PRO
Tool mã hóa, Giải mã all Pro
Công cụ làm đẹp Code HTML, CSS, C Style, JSON cực PRO
Tool nén và làm đẹp CSS PRO
Công cụ tiện ích đa chức năng - Tự tạo và thiết kế CSS theo phong cách của bạn
Tool test Code cực PRO
Tool mã hóa, Giải mã JavaScript và Văn bản
Tool chuyển mã HTML sang Ký tự đặc biệt
Tool chuyển HTML sang BBCode kèm tool mã hóa sang ký tự
Tool chuyển đổi Code HTML sang PHP
Tool chuyển HTML sang BBCode 2
Tool test mã màu
Công cụ mã hóa và giải mã ký tự văn bản
Tool làm đẹp HTML
Tool đếm ký tự PRO
Công cụ chuyển tiếng Việt có dấu sang không dấu
Công cụ gỡ bỏ Code HTML
Tiện ích khác
Tool tạo chữ nhiều màu
Left
Lưu trữ, chia sẻ tập tin
Công cụ lấy CSS và HTML của 1 trang bất kỳ
Tool vẽ hình lạ mắt Pro
Tool dịch ngôn ngữ
Đưa wap/wep/blog lên Google nhanh
Left
Đối tác
SuperOr
TruyenDoc
DoanhLinh
All phát triển bởi:
Duy_Doanh
Liên hệ:
Fb
-
Call
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
Trang chủ
>
Chia sẻ code hay và "độc"
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
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:
Tải ảnh gốc
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
Chia sẻ bài viết ???
-
Chia sẻ tới:
-
-
-
-
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?
●
Code đánh giá bài viết bằng Sao
●
Chiếc cầu phúc đức
●
Chọc Con Ông Tổng Ðốc
●
Căn nhà trọ ma ám
●
Xem bói bàn tay để biết vợ chồng chung thủy không?
Đầu trang
-
Giới thiệu
-
Điều khoản
-
Chính sách
-
Liên hệ FB
Thống kê truy cập