<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-image: url('./img/b.jpeg');
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
}
.sn{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sn .snow{
width: 100%;
height: 100%;
background-image: url('./img/xt.png');
background-position: 0 0;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.sn .snow-1{
filter: blur(4px);
animation: animate1 15s linear infinite;
}
.sn .snow-2{
filter: blur(3px);
animation: animate2 15s linear infinite;
background-size: 800px;
}
.sn .snow-3{
filter: blur(1px);
animation: animate3 15s linear infinite;
background-size: 300px;
}
@keyframes animate1{
0%{
background-position: 0 0;
}
100%{
background-position: 150px 100vh;
}
}
@keyframes animate2{
0%{
background-position: 0 0;
}
100%{
background-position: 300px 800px;
}
}
@keyframes animate3{
0%{
background-position: 0 0;
}
100%{
background-position: 0100vh;
}
}
</style>
</head>
<body>
<section class="sn">
<span class="snow snow-1"></span>
<span class="snow snow-2"></span>
<span class="snow snow-3"></span>
</section>
</body>
效果图