Có rất nhiều cách để bạn tạo một khung cảnh, hiệu ứng Giáng Sinh trên website.
Bạn có thể xem thêm bài viết trước đây Tạo hiệu ứng tuyết rơi và khung cảnh Giáng Sinh
Một cách trang trí vẫn giữ được không khí mùa Giáng Sinh nhưng lại không gây phiền hà, khó chịu cho khách hàng khi truy cập website của bạn đó là TẠO HIỆU ỨNG TUYẾT RƠI. Bài viết này tôi chia sẽ bạn một đoạn mã (code) tạo hiệu ứng Tuyết rơi trên website.
Cách làm rất đơn giản, chỉ cần copy và dán vào website của mình thôi.
Cách 1: Copy đoạn mã :
<!-- Code Snow -->
<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://itexpress.vn/API/files/img/snow-medium.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://itexpress.vn/API/files/img/snow-medium.png); -webkit-animation-duration: 20s; animation-duration: 15s; } .snow.middleground.layered { -webkit-animation-delay: 10s; animation-delay: 10s; } .snow.background { background-image: url(https://itexpress.vn/API/files/img/snow-medium.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>
<!-- End Code Snow -->, dán vào trước thẻ đóng </body> hoặc thẻ đóng </html> cũng được.
Cách 2: Chèn đoạn code sau vào trước thẻ đóng </body> hoặc thẻ đóng </html>
<script type="text/javascript" src="https://itexpress.vn/API/files/it.snow.js"></script>
Vậy là xong, khi chèn xong website sẽ được như hình sau:
