Làm hiệu ứng tuyết rơi cho blogspot

Để kết thúc series các hiệu ứng cho background của blogspot thì hôm nay mình chia sẻ nốt cho các bạn hiệu ứng tuyết rơi cho blogspot nhé.
Nhưng hãy chỉ dùng hiệu ứng này cho mùa đông thôi :)) Dùng cho mùa thu không hợp lắm đâu.

Cách thực hiện:

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Dán code sau trước thẻ </head>

<style class='cp-pen-styles'>.snow-container { position: fixed; height: 1500px; width: 100%; max-width: 100%; top: 0; overflow: hidden; z-index: 2; pointer-events: none; } .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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7sHIo1ZxbO55KuZFr9UIYyxmBgQlhxfqJEWQwCuay4BTyh_9AgbmESztJrFylWX5bQ9aw0lw3LHGFg84dGC5rTDc9RkYsf2ZEgZXH1O1_v3DNOAx0RwAXVpCO8lrKq5NqoOj-PKvbMHw/s1600/snow-large-dtc.png"); -webkit-animation-duration: 15s; animation-duration: 15s; } .snow.foreground.layered { -webkit-animation-delay: 7.5s; animation-delay: 7.5s; } .snow.middleground { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCC_Olg98LNcuFavKXoj2klvRYgKU30nZtDLKhZ8J_TiyaKjSKIIRU42etG7b3Jl-SiQdgws_B5CqGa4v6VDUsvdMapOH6yP59V0_h9RDwc8zCre1ZUZbiQ_cEd8X2yk_9RLhCIc6VHjE/s1600/snow-medium-dtc.png); -webkit-animation-duration: 20s; animation-duration: 20s; } .snow.middleground.layered { -webkit-animation-delay: 10s; animation-delay: 10s; } .snow.background { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmdqaYdXSvmAQFRul-iSNI_0KQdc2ViD3cwY6cv50_1uPGVoWKN__x4yZXslwitYAzDUcwyb48vdwR2r1wdQ8btoLD6MDSjs1QDMcMYpodVRatZWg-TPJyXMaD-PGHGfXzEt1rXWEo4Y/s1600/snow-small-dtc.png); -webkit-animation-duration: 25s; animation-duration: 25s; } .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>

Bước 3: Dán tiếp code dưới trước thẻ </body>

<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ước 4: Lưu template và ra xem thử kết quả nhé.

Rất đơn giản vậy thôi. Chúc các bạn thành công :)

Source code: Thủ thuật blogspot