Tuyết rơi trên blogspot
Thứ Năm, 28 tháng 5, 2015
<!--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/AVvXsEh27kKCsiFktB51XN4TPrrZNU9X6usJRiDz-_sh3e8SxwryUJFx8MDA9ZhI2sGfZe6g_z5jP34LTPx_eXsnNRzlSmZCFUvG929df9INar9HOkz3Z5An2URii5vhXBoA_Rgx9Z4aAWzQelc/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/AVvXsEh28UlwODXYQk6Jy20SXmrEO8vuzVq6OOEFxUAzHSHiutkbwwJ3i_6OW-pyc_bl933yRnoWfhTm25KWw2qaZLD9RYX-M2WGRutJW-5Lrhd5qFn3nKM2SOwoZM_mXI30pjz85F40wJqTGC0/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/AVvXsEhRhjNxAPylAoDyR47ndQDpH9CgJS5yArz-yzCJDPbSOISe47WrpS9WS-_orHvuDzS8kWVBEuJuhKZGC1w5nNZthLoll-MubYcVY-gT45quI3nbHZv1UvXqeel9pMns6PLQnfGRUuulZMQ/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>
Bài liên quan

Home










Comments[ 0 ]
Đăng nhận xét