动画登录表单的使用--和linear-gradinent filter keyframes的综合使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Animated Login Form UI Design</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section{
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: linear-gradient(-30deg,#03a9f4 0%,#3a78b7 50%,#262626 50%,#607d8b 100%);
                /* 动画开始  重点 linear-gradinent  filter keyframes*/
                filter: hue-rotate(120deg);
                animation: animate 10s linear infinite;
            }
            
            @keyframes  animate{
                0%{
                    filter: hue-rotate(0deg);
                }
                100%{
                    filter: hue-rotate(360deg);
                }
            }
            
            .box{
                position: relative;
                padding: 50px;
                width: 260px;
                height: 480px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(255,255,255,0.1);
                box-shadow: 0 5px 35px rgba(0,0,0,0.2);
            }
            .box::after{
                content: '';
                position: absolute;
                top: 5px;
                left: 5px;
                right: 5px;
                bottom: 5px;
                border-radius: 5px;
                pointer-events: none;
                background:linear-gradient(to bottom,rgba(255,255,255,0.3) 0%,
                rgba(255,255,255,0.1) 15%, transparent 50% transparent 85% ,rgba(255,255,255,0.3) 100% ) ;
            }
            
            
            /* .box .form */
            .box .form{
                position: relative;
                width: 100%;
            }
            .box .form h2{
                color: #fff;
                font-weight: 600;
                letter-spacing: 2px;
                margin-bottom: 30px;
            }
            .box .form .inputBx{
                position: relative;
                width: 100%;
                margin-bottom: 20px;
            }
            .box .form .inputBx input{
                width: 100%;
                outline: none;
                /* 输入左边顶出来 */
                padding-left: 35px;
                border: 1px solid rgba(255,255,255,0.2);
                background: transparent;
                border-radius: 6px;
                color: #fff;
                font-size: 16px;
                font-weight: 300;
                box-shadow: inset 0 0 25px rgba(0,0,0,0.2);
            }
            .box .form .inputBx input::placeholder{
                color: #fff;
            }
            .box .form .inputBx input[type="submit"]{
                background: #fff;
                color: #111;
                max-width: 100px;
                padding: 8px 10px;
                box-shadow: inset 0 0 25px rgba(0,0,0,0.2);
                box-shadow: none;
                font-weight: 500;
                letter-spacing: 1px;
                cursor: pointer;
            }
            .box .form .inputBx img{
                position: absolute;
                top: 2px;
                left: 10px;
                display: block;
                width: 20px;
                height: 20px;
                transform: scale(0.7);
                /* 图片白色 */
                filter: invert(1);
            }
            .remeber{
                position: relative;
                display:inline-block ;
                color: white;
                font-weight: 300;
                margin-bottom: 10px;
                cursor: pointer;
            }
            .box .form p{
                color: #fff;
                font-weight: 300;
                font-size: 15px;
                margin-top: 5px;
            }
            .box .form a{
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <section>
            <div class="box">
                <div class="form">
                    <h2>Login</h2>
                    <form action="">
                        <div class="inputBx">
                            <input type="text" placeholder="Username"  />
                            <img src="img/user.png" >
                        </div>
                        <div class="inputBx">
                            <input type="password" placeholder="Password"  />
                            <img src="img/lock.png" >
                        </div>
                        <label class="remeber">
                            <input type="checkbox" />Remember Me
                        </label>
                        <div class="inputBx">
                            <input type="submit" value="Login" />
                        </div>
                    </form>
                    <p>Forget <a href="#">Password</a></p>
                    <p>Need an <a href="#">Account</a></p>
                </div>
            </div>
        </section>
    </body>
</html>