Tổng hợp 1 số code cho blogspots

hiệu ứng tuyết rơi

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 web không riêng gì cho blogspot. 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 .

Bước 1 : Đăng nhập vào Blogger Dashboard,  rồi chọn Template -> Edit Html .

Bước 2 : Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa sau : </body>  rất đơn giản, chỉ cần copy paste đoạn mã dưới đây vào trên thẻ </body> là được.
Đặt 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(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>
<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>

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share