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

代码语言：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,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}ol,ul{list-style:none;margin:0px;padding:0px;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}/*-- start editing from here --*/a{text-decoration:none;}.txt-rt{text-align:right;}/* text align right */.txt-lt{text-align:left;}/* text align left */.txt-center{text-align:center;}/* text align center */.float-rt{float:right;}/* float right */.float-lt{float:left;}/* float left */.clear{clear:both;}/* clear float */.pos-relative{position:relative;}/* Position Relative */.pos-absolute{position:absolute;}/* Position Absolute */.vertical-base{	vertical-align:baseline;}/* vertical align baseline */.vertical-top{	vertical-align:top;}/* vertical align top */nav.vertical ul li{	display:block;}/* vertical menu */nav.horizontal ul li{	display: inline-block;}/* horizontal menu */img{max-width:100%;}/*-- end reset --*//*--main-content-starts-here--*/body {font-family:Verdana;	        width: 100%;    text-transform: uppercase;    background: #fff;    background-attachment: fixed; background: url(//repo.bfw.wiki/bfwrepo/image/615cf7a3d9d92.png)no-repeat 0px 0px;    background-size: cover;	-webkit-background-size: cover;	-o-background-size: cover;	-moz-background-size: cover;	-ms-background-size: cover;   	text-align: center;}h1,h2,h3,h4,h5,h6{	}.top-buttons-agileinfo {    /* float: right; */    text-align: right;    padding: 2em 3em;}.main-agileits {    width: 42%;    margin: 0 auto;}h2.sub-agileits-w3layouts,h3.sub-agileits-w3layouts {    color: #fff;    font-size: 20px;    font-weight: 500;    text-align: center;    margin-bottom: 2em;    letter-spacing: 2px;}.form-w3-agile {    background: rgba(41, 39, 39, 0.46);    -webkit-box-shadow: 0px 35px 44px -22px rgba(0,0,0,0.72);    -moz-box-shadow: 0px 35px 44px -22px rgba(0,0,0,0.72);    box-shadow: 0px 35px 44px -22px #1f181b;    padding: 60px 40px;}.top-buttons-agileinfo a {    background: rgba(255, 255, 255, 0.15);    text-decoration: none;    color: #fff;    font-size: 14px;    letter-spacing: 1px;    display: inline-block;    padding: 9px 26px;    border: 1px solid #756d6d;    margin: 15px 15px 0px 0px;    -webkit-transition: 0.3s all;    -moz-transition: 0.3s all;    -o-transition: 0.3s all;    -ms-transition: 0.3s all;    transition: 0.3s all;    border: 1px solid #fff;}.top-buttons-agileinfo a.active {    border-color: #df5799;    background: #df5799;}h1 {    text-align: center;    font-size: 33px;    font-weight: bold;    margin: 10px 0 35px 0;    color: #ffffff;    letter-spacing: 2px;    word-spacing: 4px;}.icon-w3 h3 {    color: #ffffff;    font-size: 12px;    letter-spacing: 1px;    width: 164px;    padding: 16px 10px 16px 24px;    /* background: rgba(0, 0, 0, 0.42); */}.icon-w3 {    display: inline-block;    position: absolute;    left: 0px;    bottom: 31px;}form {    margin: 0 auto;    width: 100%;}.form-sub-w3{	position:relative;} .form-w3-agile input[type="text"], .form-w3-agile input[type="password"], .form-w3-agile input[type="email"] {    outline: none;    font-size: 15px;    color: #ffffff;    text-align: left;    padding: 12px 14px;    width: 95.5%;    border: none;    border-bottom: 1px solid #889ba0;    -webkit-appearance: none;    margin-bottom: 30px;    background: transparent;        letter-spacing: 1px;}a.forgot-w3layouts {    display: block;    text-align: center;    text-decoration: none;    font-size: 14px;    letter-spacing: 1px;    text-transform: capitalize;    color: #fff;}.submit-w3l input[type="submit"] {    background: #fff;    color: #000;    outline: none;    display: block;    margin: 0 auto;    border: none;    cursor: pointer;    padding: 13px 38px;    font-size: 14px;    width: 100%;    margin-top: 1em;    font-weight: bold;    text-transform: uppercase;        transition: 0.3s all;    -webkit-transition: 0.3s all;    -moz-transition: 0.3s all;    -o-transition: 0.3s all;    -ms-transition: 0.3s all;}.submit-w3l input[type="submit"]:hover{    background: #df5799;	color:#ffffff;	transition: 0.3s all;    -webkit-transition: 0.3s all;    -moz-transition: 0.3s all;    -o-transition: 0.3s all;    -ms-transition: 0.3s all;}.p-bottom-w3ls {    font-size: 14px;    color: #eee;    margin-top: 1em;    text-align: center;    text-transform: none;    letter-spacing: 1px;}.p-bottom-w3ls a {    color: #df5799;    outline: none;    text-decoration: none;    margin-right: 8px;	font-weight: 600;	}/*--main-content-ends-here--*//*--register-form--*/.contact-w3-agileits h3 {    color: #fff;    font-size: 20px;    font-weight: 500;    text-align: center;    margin-bottom: 2em;    letter-spacing: 2px;}.contact-form1 {    padding: 60px 40px;     background: #444;}#small-dialog, #small-dialog1, #small-dialog2 {    max-width: 541px;}.my-mfp-zoom-in.mfp-ready.mfp-bg {    opacity: .9;}.contact-w3-agileits input[type="text"],input[type="email"],input[type="password"]{	 outline: none;    font-size: 15px;    color: #ffffff;    padding: 15px 40px 15px 10px;    width: 87%;    border: none;    border-bottom: 1px solid #0b0b0b;    -webkit-appearance: none;    margin-bottom: 20px;    background: transparent;	}.form-sub-w3ls{	position:relative;}.icon-agile{	display: inline-block;    position: absolute;    right: 12px;    bottom: 35px;}.icon-agile i{	color: #ffffff;    font-size: 16px;}label.checkbox {    displa.........完整代码请登录后点击上方下载按钮下载查看