Thủ thuật blogspot - Dautoblog

Tuyết Rơi Hoàn Toàn Bằng CSS3

Tuyết Rơi Hoàn Toàn Bằng CSS3
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.

Tuyết, tuyết rơi hay mưa tuyết là một hiện tượng thiên nhiên, giống như mưa nhưng là mưa của những tinh thể đá nhỏ. Tuyết thường xuất hiện ở các vùng ôn đới.

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 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 nên vấn đề làm chậm tốc độ load của blog là không đáng kể.

Xem thử nhé:

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("http://1.bp.blogspot.com/-lw9wNzoLE18/VJYauTFXpgI/AAAAAAAAB7Q/ADHDJfmb5Vw/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(http://4.bp.blogspot.com/-QU2NsY6yuJE/VJYauUIkINI/AAAAAAAAB7U/H4iDiLPyGgI/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(http://1.bp.blogspot.com/-V_jVb7uwj8E/VJYauMmgiwI/AAAAAAAAB7M/eQrPIFx-eQM/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("http://1.bp.blogspot.com/-lw9wNzoLE18/VJYauTFXpgI/AAAAAAAAB7Q/ADHDJfmb5Vw/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(http://4.bp.blogspot.com/-QU2NsY6yuJE/VJYauUIkINI/AAAAAAAAB7U/H4iDiLPyGgI/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(http://1.bp.blogspot.com/-V_jVb7uwj8E/VJYauMmgiwI/AAAAAAAAB7M/eQrPIFx-eQM/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!
Comments blogger

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