纯css写唯美登录页面

css

    <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: url("../img/xhc1.jpg") no-repeat;
            background-size: cover;
        }
        #container{
            display: block;
            width: 600px;
            height: 300px;
            background-color: rgba(0,0,0,0.6);
            margin: 0 auto;
            position: relative;
            top: 250px;
            border-radius: 10px;
        }
        #inner{
            display: none;
            width: 300px;
            height: 300px;
            background-color: #cccccc;
            margin: 0 auto;
            position: relative;
        }
        #inner span{
            display: none;
        }
        .name{
            position: relative;
            left: 200px;
            outline-style: none;
            width: 240px;
            height: 30px;
            border-style: none;
            border-bottom: 2px solid #FFFFFF;
            background-color: rgba(0,0,0,0);
            font-size: 20px;
            color: #FFFFFF;
        }
        .password{
            position: relative;
            left: 200px;
            top: 30px;
            outline-style: none;
            width: 240px;
            height: 30px;
            border-style: none;
            border-bottom: 2px solid #FFFFFF;
            background-color: rgba(0,0,0,0);
            font-size: 20px;
            color: #FFFFFF;
        }
        .login{
            display: block;
            font-size: 35px;
            color: #ffffff;
            text-align: center;
            font-family: Constantia;
            font-weight: bold;
            padding-top: 30px;
            padding-bottom: 20px;
        }

        #check{
            position: relative;
            left: 160px;
            top: 40px;
            width: 240px;
            height: 20px;
            opacity: 0.5;
        }
        .check_text{
            color: rgba(255,255,255,0.5);
            font-size: 17px;
            margin-left: 60px;
            position: relative;
            top: 35px;
        }
        #set{
            position: absolute;
            top: 235px;
            left: 200px;
            width: 110px;
            height: 30px;
            font-size: 17px;
            color: #ffffff;
            text-align: center;
            font-family: Constantia;
            background:linear-gradient(100deg, #ff8b2c, #1eff8f 20%, #dbe2a6, #fdff27) ;
            border-radius: 15px;
        }
        #get{
            border-radius: 15px;
            position: absolute;
            top: 235px;
            left: 330px;
            width: 110px;
            height: 30px;
            font-size: 17px;
            color: #ffffff;
            text-align: center;
            font-family: Constantia;
            background:linear-gradient(100deg, #1c803e, #6464ff 20%,blueviolet, #ff14b1) ;
        }
        .nameicon{
            display: inline-block;
            color: #FFFFFF;
            position: absolute;
            top: 105px;
            left: 170px;
            width: 30px;
            height: 30px;
        }
        .passicon{
            display: inline-block;
            width: 30px;
            height: 30px;
            color: #FFFFFF;
            position: absolute;
            top: 170px;
            left: 170px;
        }
    </style>

html

<div id="container" class="animated bounceInLeft">
    <span class="login">Login</span>
    <span class="nameicon"><i class="fa fa-user-circle"></i></span><input class="name" placeholder="Username" type="text" id="getusername"><br>
    <span class="passicon"><i class="fa fa-key"></i></span><input class="password" placeholder="Password" type="password" id="getpassword"><br>
    <input type="checkbox" id="check"><span class="check_text">记住密码</span><br>
    <input type="button" value="注册" id="set">
    <input type="button" value="登录" id="get">
</div>