Thursday, December 24, 2020

Download Javascript Và Css Hiệu Ứng Tuyết Rơi Cho Website Bogger/WordPress

Download Javascript Và Css Hiệu Ứng Tuyết Rơi Cho Website Bogger/WordPress

- Hôm nay mình sẽ chia sẽ cho mọi người cách tạo một hiệu ứng tuyết rơi cho website của mình bằng cách sử dụng Css Và JavaScript nhé!
- Trong mùa Nô Ênh chắc ai cũng muốn biến tấu cho trang web của mình theo kiểu giáng sinh đúng hong. Làm nó thêm sinh động và đẹp 😍
- Tuyết nó sẽ trong như thế này nha:
- Thôi không dài dòng nữa mình đi thẳng vào vấn đề lun nha:
+ Bước 1: Cách bài tìm đến trước thẻ </body> chèn một đoạn CSS này vào nhé nhớ trước thẻ đóng </body> sai là nó không hiện đâu
_____________________________
<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(&quot;https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png&quot;);-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 class='snow foreground layered'/>
<div class='snow middleground'/>
<div class='snow middleground layered'/>
<div class='snow background'/>
<div class='snow background layered'/>
</div>
__________________________________
- Sau khi bạn dán xong là chỉ cần lưu lại và xem thành quả thôi.
- Ngoài ra bạn có thể tùy biến thời gian rơi, tốc độ rơi và kích thước của tuyết nữa
- Lời kết: Chúc Bạn Thành Công Và Có Một Mùa Giáng Sinh Vui Vẻ!!!
BAD OF TRUE V4
OBB25

0 Post a Comment: