粒子波动流登录界面-html代码-BFW代码库

粒子波动流登录界面
代码语言：html
代码描述：粒子波动流登录界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
        <head>

                <style>
                        body {
                                margin: 0;
                                overflow: hidden;
                                background: linear-gradient(to bottom, #19778c, #095f88);
                                background-size:1400% 300%;
                                animation: dynamics 6s ease infinite;
                                -webkit-animation: dynamics 6s ease infinite;
                                -moz-animation: dynamics 6s ease infinite;
                                font-size: 14px;
                                color: #ffffff;
                                min-height: 700px;
                        }
                        /*登录样式*/
                        .main {
                                position: fixed;
                                text-align: center;
                                top: 182px;
                                width: 100%;
                                height: auto;
                                display: flex;
                                justify-content: center;
                        }
                        .login {
                                width: 470px;
                                height:470px;
                                background: linear-gradient(to bottom, #19778c, #095f88);
                                animation: dynamics 6s ease infinite;
                                -webkit-animation: dynamics 6s ease infinite;
                                -moz-animation: dynamics 6s ease infinite;
                                opacity: 0.9;
                                border: solid 1px #13a1fc;
                                background-size:1400% 300%;
                        }
                        @keyframes dynamics {
                                0% {
                                        background-position: 0% 0%;
                                }
                                50% {
                                        background-position: 50% 100%;
                                }
                                100% {
                                        background-position: 100% 0%;
                                }
                        }
                        .log-con {
                                background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top,
                                linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top,
                                linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom,
                                linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom;
                                background-repeat: no-repeat;
                                background-size: 3px 20px, 20px 3px;
                                height: 100%;
                                margin: -2px;
                                padding: 3px 1px 1px 0;
                                border-radius: 3px;
                        }
                        .log-con >span {
                                font-size: 30px;
                                font-weight: bold;
                                line-height: 24px;
                                letter-spacing: 2px;
                                display: block;
                                margin: 20px 0 44px 0;
                        }
                        .log-con >span::after {
                                display: block;
                                content: '';
                                width: 57px;
                                height: 3px;
                                background: #ffffff;
                                margin-top: 16px;
                                justify-content: center;
                                position: relative;
                                left: 206px;
                        }
                        .log-con>input {
                                display: block;
                                margin: 10px 0 32px 70px;
                                width: 330px;
                                height: 42px;
                                background-color: #ffffff;
                                border-radius: 4px;
                                opacity: 0.9;
                                border: 0;
                                font-size: 16px;
                                outline: none;
                                padding-left: 10px;
                                color: #000000;
                        }
                        .log-con>a {
                                width: 340px;
                                height: 44px;
                                background-color: #0090ff;
                                border-radius: 4px;
                                display: block;
                                margin: 10px 0 0 70px;
                                text-align: center;
                                line-height: 44px;
                                cursor: pointer;
                                opacity: 1;
                        }

                        input::-webkit-input-placeholder {
                                color: #000000;
                                font-size: 16px;
                        }
                        .log-con>.code {
                                width: 216px;
                                display: inline-block;
                                margin-left: 6px;
                        }
                        .log-con>#code {
                                width: 94px;
                                display: inline-block;
                                margin-left: 14px;
                                cursor: pointer;
                        }
                        /*logo*/
                        .logo {
                                width: 168px;
                                height: 75px;
                                position: fixed;
                                left: 150px;
                                top: 26px;
                        }
                        .logo>img {
                                max-width: 100%;
                                max-height: 100%;
                        }
                        /*版权样式*/
                        .copyright {
                                position: fixed;
                                bottom: 10px;
                                font-size: 16px;
                                display: block;
                                width: 100%;
                                text-align: center;
                        }
                </style>
        </head>
        <body>
                <div class="logo">
                
                </div>
                <div class="main">.........完整代码请登录后点击上方下载按钮下载查看