html结构
<div class="iwrap">
<div class="wl_move_a"></div>
<div class="wl_move_b"></div>
</div>
俩张图片交替，实现无缝循环下雪效果
css样式
<style>
.iwrap{
position:relative;
width:1200px;
height:1000px;
margin:0 auto;
background:#eee;
}
.wl_move_a {
animation: snowmove_a 80s 40s linear infinite;
position: absolute;
top: -100%;
left: 0;
background: url("../snow_a.png") center center no-repeat;
background-size: 1200px;
height: 100%;
width: 1200px;
z-index: 0;
}
@keyframes snowmove_a {
from {
top: -100%;
left: 0
}
to {
top: 100%;
left: -200px;
}
}
.wl_move_b {
animation: snowmove_b 80s linear infinite;
position: absolute;
top: 0%;
left: 0;
background: url("../snow_a.png") center center no-repeat;
background-size: 1200px;
height: 100%;
width: 1200px;
z-index: 0;
}
@keyframes snowmove_b {
from {
top: -100%;
left: 0
}
to {
top: 100%;
left: 200px;
}
}
</style>
left值由0px变为-200px 或者200px，倾斜下更自然。
下雪图片
snow_a.png
