CSS3 Animation Hiệu Ứng Tuyết Rơi cho Web/Wap/Blog

Cập nhật: Lượt xem: 628 [ Css ]

Code CSS3 Animation tạo hiệu ứng bông tuyết rơi cho trang Web/Wap/Blog , bạn sẽ có một website lung linh đón giáng sinh .

CSS3 Animation Hiệu Ứng Tuyết Rơi cho Web/Wap/Blog

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 web. Nhược điểm là khi chạy sẽ làm nặng trang và web đơ đơ 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 web. 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 .

CSS

<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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.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>

HTML

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

Chúc các bạn thành công!