自适应背景粒子动画效果的登录表单页面代码-html代码-BFW代码库

代码语言：html

代码描述：自适应背景粒子动画效果的登录表单页面代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        @charset "utf-8";
    /* CSS Document */
    /*Reset*/
    *{box-sizing:content-box;}
    a:hover, a:focus{text-decoration:none;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    body{-webkit-text-size-adjust:none;}
    fieldset,img{border:0;}
    img{ vertical-align: top; max-width: 100%; }
    address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
    ol,ul{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym {border:0;}
    .clearfix:after{visibility:hidden;display: block;font-size:0;content:" ";clear:both;height:0;}
    * html .clearfix{ zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    .cli{ clear:both; font-size:0; height:0; overflow:hidden;display:block;}
    .lclear{clear:left;font-size:0;height:0;overflow:hidden;}	
    .fl{float:left;}
    .fr{float:right;}
    
    /* ֹ
    iframe{nifm2:expression(this.src='about:blank',this.outerHTML='');}
    script{no2js:expression((this.src.toLowerCase().indexOf('http')==0)?document.close():'');}
    */
    /* ıԼ˶
    div{word-wrap: break-word;word-break: normal;}  
    p{text-align:justify; text-justify:inter-ideograph;}
    */
    /*general*/
    body{font-size:12px;font-family:'微软雅黑',"宋体","Arial Narrow",Helvetica,sans-serif;color:#000;line-height:1.2;text-align:left;}
    a{color:#333;text-decoration:none;}
    
            html,body{ 
        	width:100%;
        	height:100%;
        }
        body{background-image: url(//repo.bfw.wiki/bfwrepo/image/611da9b999795.png);}
       
    .count-particles{
      background: #000022;
      position: absolute;
      top: 48px;
      left: 0;
      width: 80px;
      color: #13E8E9;
      font-size: .8em;
      text-align: left;
      text-indent: 4px;
      line-height: 14px;
      padding-bottom: 2px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
    }
    
    .js-count-particles{
      font-size: 1.1em;
    }
    
    #stats,
    .count-particles{
      -webkit-user-select: none;
      margin-top: 5px;
      margin-left: 5px;
    }
    
    #stats{
      border-radius: 3px 3px 0 0;
      overflow: hidden;
    }
    
    .count-particles{
      border-radius: 0 0 3px 3px;
    }
    
    
    #particles-js{
    	width: 100%;
    	height: 100%;
    	position: relative;
    	background-color: hsla(0,0%,0%,0.7);
    	background-position: 50% 50%;
    	background-size: cover;
    	background-repeat: no-repeat;
    	margin-left: auto;
    	margin-right: auto;
    }
    #particles-js img{
    
    }
    .sk-rotating-plane {
    	display: none;
        width: 80px;
        height: 80px;
        margin: auto;
        background-color: white;
        -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
        animation: sk-rotating-plane 1.2s infinite ease-in-out;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -40px;
        margin-top: -80px;
    }
    .sk-rotating-plane.active{display: block;}
    
    @keyframes sk-rotating-plane{
    	0% {
    	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    	}
    	50% {
    	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    	}
    	100% {
    	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    	}
    }
    
    @keyframes login-small{
    	0%{
    		transform: scale(1);-moz-transform: scale(1);	/* Firefox 4 */-webkit-transform: scale(1);	/* Safari 和 Chrome */-o-transform: scale(1);	/* Opera */-ms-transform:scale(1); 	/* IE 9 */
    	}
    	100%{
    		transform: scale(0.2);-moz-transform: scale(0.1);	/* Firefox 4 */-webkit-transform: scale(0.2);	/* Safari 和 Chrome */-o-transform: scale(0.1);	/* Opera */-ms-transform:scale(0.1); 	/* IE 9 */
    	}
    }
    
    .login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 400px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
    .login-top{font-size: 24px;margin-top: 70px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
    .login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
    .login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
    .login-center-img>img{width: 100%;}
    .login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
    .login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
    .login-center-input input:focus{border: 1px solid dodgerblue;}
    .login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
    .login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
    .login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
    .login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
    </style>
</head>

<body>

    <div id="particles-js">
        <div class="login">
            <div class="login-top">
                登录
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="//repo.bfw.wiki/bfwrepo/image/608ff7893b3e9.png" /></div>
                <div class="login-center-input">
                    <input type="text" name="" value=.........完整代码请登录后点击上方下载按钮下载查看