css实现一个下雪背景动画的登录页面效果代码-html代码-BFW代码库

css实现一个下雪背景动画的登录页面效果代码

代码语言：html

代码描述：css实现一个下雪背景动画的登录页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
        .snow-container {  position: absolute;  height:794px;  width: 100%;  max-width: 100%;  top: 0;  overflow: hidden;  z-index: 2;  pointer-events: none;}.snow-container.two {    height: 440px;}.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("//repo.bfw.wiki/bfwrepo/images/snow/1.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("//repo.bfw.wiki/bfwrepo/images/snow/2.png");  -webkit-animation-duration: 20s;          animation-duration: 20s;}.snow.middleground.layered {  -webkit-animation-delay: 10s;          animation-delay: 10s;}.snow.background {  background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/3.png");  -webkit-animation-duration: 30s;          animation-duration: 30s;}.snow.background.layered {  -webkit-animation-delay: 15s;          animation-delay: 15s;}@-webkit-keyframes snow {  0% {    -webkit-transform: translate3d(0, -100%, 0);            transform: translate3d(0, -100%, 0);  }  100% {    -webkit-transform: translate3d(15%, 100%, 0);            transform: translate3d(15%, 100%, 0);  }}@keyframes snow {  0% {    -webkit-transform: translate3d(0, -100%, 0);            transform: translate3d(0, -100%, 0);  }  100% {    -webkit-transform: translate3d(15%, 100%, 0);            transform: translate3d(15%, 100%, 0);  }}@media (max-width: 1366px){  .snow-container {		position: absolute;		height: 628px;	}	}@media (max-width:1280px){	.snow-container {		position: absolute;		height: 578px;	}}@media (max-width:1080px){	.snow-container {		position: absolute;		height: 498px;	}}@media (max-width:1054px){	}@media (max-width:1024px){}@media (max-width:991px){	.snow-container.two {		height: 365px;	}}@media (max-width:800px){	.snow-container {		position: absolute;		height: 375px;	}	.snow-container.two {		height: 352px;	}}@media (max-width:768px){	.snow-container {		position: absolute;		height: 373px;	}}@media (max-width:640px){	}@media (max-width: 480px){	}@media (max-width: 414px){}@media (max-width: 384px){}
        
        /*-- reset --*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt.........完整代码请登录后点击上方下载按钮下载查看