自适应蓝色动态粒子线背景登录表单效果代码-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>
        html,body{width:100%;height:100%}canvas{display:block;vertical-align:bottom}.count-particles{background:#002;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:700}.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-image:url(//repo.bfw.wiki/bfwrepo/image/6085fa955c872.png);background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin-left:auto;margin-right:auto}.sk-rotating-plane{display:none;width:80px;height:80px;margin:auto;background-color:#fff;-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);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}100%{transform:scale(.2);-moz-transform:scale(.1);-webkit-transform:scale(.2);-o-transform:scale(.1);-ms-transform:scale(.1)}}.login{z-index:2;position:absolute;width:350px;border-radius:5px;height:500px;background:#fff;box-shadow:0 0 5px #333;top:50%;left:50%;margin-top:-250px;margin-left:-175px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}.login-top{font-size:24px;margin-top:100px;padding-left:40px;box-sizing:border-box;color:#333;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 .5s;padding-left:10px;color:#333;width:100%;height:30px;border:0;border-bottom:1px solid #ccc;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;box-sizing:border-box;outline:none;position:relative}.login-center-input input:focus{border:1px solid #1e90ff}.login-center-input-text{background:#fff;padding:0 5px;position:absolute;z-index:0;opacity:0;height:20px;top:50%;margin-top:-10px;font-size:14px;left:5px;color:#1e90ff;line-height:20px;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}.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 .8s;animation:login-small .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:#1e90ff;border-radius:5px;margin:0 auto;margin-top:50px;color:#fff}
        @charset "utf-8"; * {
        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: 400
    }
    
    ol,ul {
        list-style: none
    }
    
    caption,th {
        text-align: left
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size: 100%;
        font-weight: 400
    }
    
    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}
    
    *:first-child+html .clearfix {
        zoom:1}
    
    .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
    }
    
    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
    }
    </style>
</head>

<body>
    <div id="particles-js">
        <div class="login">
            <div class="login-top">
                登录
            </div>
   .........完整代码请登录后点击上方下载按钮下载查看