Hiệu ứng mưa rơi cho blogger

Vào những dịp lễ tết như dịp giáng sinh chào đón noel.Tết nguyên đán hay đơn giản là các bạn muốn trang trí cho blogspot của mình.
Ta đã tạo được tuyết bay tuyết rơi trên blogspot sao lại không thể tạo mưa rơi mưa bay trên blogspot nhỉ.
Dưới đây sẽ chia sẻ code tạo mưa rơi trên blogspot hoàn toàn bằng CSS3.
Code này chỉnh sửa từ code tuyết rơi của bài trước.

Demo ngay tại bài viết này.

Làm Thể Nào Để Tạo Mưa Rơi Trên Blogspot

Các bạn vào phần chỉnh sửa HTML của mẫu tìm tới thẻ </head> và dán đoạn code sau vào trước nó:

<style class='cp-pen-styles'>.muaroi-container {
position: fixed;
height: 1500px;
width: 100%;
max-width: 100%;
top: 0;
overflow: hidden;
z-index: 2;
pointer-events: none;
}
.muaroi {
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: muaroi linear infinite;
animation: muaroi linear infinite;
}
.muaroi.foreground {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDwR2h0PPbiy7O02BMChI08TBZGekqENlfomf9ZjmZgn7KU9Hz08HLOoCkbwJj_Zc60WYGkPvmLUpVw1T8K-_tv8VedxuqaUFouH9TTapdXYwaKY-05a9TSBka9qv2tbgFNRYNIqHLBY/s1600/snow-small-dtc.png");
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.muaroi.foreground.layered {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.muaroi.middleground {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDwR2h0PPbiy7O02BMChI08TBZGekqENlfomf9ZjmZgn7KU9Hz08HLOoCkbwJj_Zc60WYGkPvmLUpVw1T8K-_tv8VedxuqaUFouH9TTapdXYwaKY-05a9TSBka9qv2tbgFNRYNIqHLBY/s1600/snow-small-dtc.png);
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.muaroi.middleground.layered {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.muaroi.background {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDwR2h0PPbiy7O02BMChI08TBZGekqENlfomf9ZjmZgn7KU9Hz08HLOoCkbwJj_Zc60WYGkPvmLUpVw1T8K-_tv8VedxuqaUFouH9TTapdXYwaKY-05a9TSBka9qv2tbgFNRYNIqHLBY/s1600/snow-small-dtc.png);
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.muaroi.background.layered {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
@-webkit-keyframes muaroi {
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 muaroi {
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 tiếp theo tìm tới thẻ </body> và dán đoạn code sau vào trước nó:
Code:

<div class='muaroi-container'><div class='muaroi foreground'></div><div class='muaroi foreground layered'></div><div class='muaroi middleground'></div><div class='muaroi middleground layered'></div><div class='muaroi background'></div><div class='muaroi background layered'></div></div>

Chúc thành công!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait