Mưa Rơi Trên Blogspot

Mưa Rơi Trên Blogspot
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ó:
Code:
<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("http://1.bp.blogspot.com/-V_jVb7uwj8E/VJYauMmgiwI/AAAAAAAAB7M/eQrPIFx-eQM/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(http://1.bp.blogspot.com/-V_jVb7uwj8E/VJYauMmgiwI/AAAAAAAAB7M/eQrPIFx-eQM/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(http://1.bp.blogspot.com/-V_jVb7uwj8E/VJYauMmgiwI/AAAAAAAAB7M/eQrPIFx-eQM/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!

Nhận xét

Không có nhận xét nào :