Hiệu ứng tuyết rơi chỉ với css3 cho blogspot

Giáng sinh đang tới gần,phố phường nhiều nơi đã tràn ngập không khí Giáng sinh có lẽ nào ta không chia sẻ không khí vui vẻ đó ngay tại ngôi nhà tinh thần đáng yêu của chúng ta là ngôi nhà nhỏ Blogspot.

Hiệu ứng tuyết rơi cho blogspot bao gồm:

- Sử dụng javascript.
- Sử dụng hoàn toàn bằng css3

Với một số bài đã chia sẻ như tạo chuông giáng sinh xem tại đây

Tại bài chia sẻ code tạo tuyết rơi trước tại đây trong code đều sử dụng javascript nên phần nào ảnh hưởng tới tốc độ load trang.

Tại bài này xin chia sẻ code tạo tuyết rơi sử dụng hoàn toàn là CSS3 và HTML, do chỉ dùng css3 nên vấn đề làm chậm tốc độ load của blog là không đáng kể.

Hướng dẫn cài đặt hiệu ứng tuyết rơi trên blogspot chỉ với css3

Xem thử:
DEMO

Cách thực hiện

Cách 1

Đối với mẫu blog đã ẩn tiêu đề để chèn banner động(thêm tiện ích cho header) thì chỉ việc dán code sau vào phần tiện ích trên header,nếu đã có 1 tiện ích trên header rồi thì dán chung vào với tiện ích đó không nên thêm 1 tiện ích mới.
Code:

<!--Tuyết rơi-->
<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/AVvXsEhOSanzwyNeQib_sij7dqOfQZa045VTnijYRULvVSYM67uoCJT0MYFrB1wRK0n_b-au8RuYchkd5oiSi-6tb9vGoX9P7dk5rMFxdY8B6NRknzcyWm2g1u_XIB74ePzwEzvZjpCtipsAuls/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/AVvXsEiKKUpbQIXdLVAckr5kaMoUnAgCYbhahqkE9HHrJ4kuf3RrnBPTPtqEh1QW0A93USqXA3uNT4FmZW9Vn5RHOhq8c_7vDGXqzImv3UIwLFP8v0ywkysMlbdJhApe-h627FisY3gH_U7b-3g/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/AVvXsEgbC4klwdVs62LaCuRa7WDXUJrMnTAmVznQvasdRRXPC2WuKYiSLYoiolImBfvIKvy3SF130uO3d8vbjVIDXcWipV9ixNbuxjwyRlLooEgbpDHkiqDU9kmOmN9dP167xN9gbciW-HfB9Bk/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>
<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>

Cách 2
Với cách này ta chèn thẳng vào trong mẫu
Chèn đoạn code sau vào 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/AVvXsEhOSanzwyNeQib_sij7dqOfQZa045VTnijYRULvVSYM67uoCJT0MYFrB1wRK0n_b-au8RuYchkd5oiSi-6tb9vGoX9P7dk5rMFxdY8B6NRknzcyWm2g1u_XIB74ePzwEzvZjpCtipsAuls/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/AVvXsEiKKUpbQIXdLVAckr5kaMoUnAgCYbhahqkE9HHrJ4kuf3RrnBPTPtqEh1QW0A93USqXA3uNT4FmZW9Vn5RHOhq8c_7vDGXqzImv3UIwLFP8v0ywkysMlbdJhApe-h627FisY3gH_U7b-3g/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/AVvXsEgbC4klwdVs62LaCuRa7WDXUJrMnTAmVznQvasdRRXPC2WuKYiSLYoiolImBfvIKvy3SF130uO3d8vbjVIDXcWipV9ixNbuxjwyRlLooEgbpDHkiqDU9kmOmN9dP167xN9gbciW-HfB9Bk/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>

Tiếp theo chèn đoạn code sau 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>

Quay lại Blog thưởng thức kết quả nhé
Chúc thành công!