猫史档案馆

 

 

代码。。

<style>
    body {
        background-image: url(背景.png);
    }
</style>
<form action="#extend /master/
">
    <h1><strong>login</strong></h1>
    <label for="passworld"></label><input type="password" placeholder="passworld" id="密码">
    <br>
    <br>
    <label for="手机号"></label><input type="number" placeholder="phone number" id="手机号">
    <br><br>
    <label for="注册"></label><input type="submit" id="注册" value="LOGIN" id="borde"></form>
<style>
    #borde {
        width: 100%;
        height: 100px;
        border-radius: 100px;
        border: 100px #00ffd5;
        opacity: 10;
        text-align: center;
    }
    
    #密码 {
        position: absolute;
        top: 40px;
        left: 500px;
        right: 100;
        background-image: linear-gradient(#90f7ec, #32ccbc);
        width: 100px;
        border-radius: 0px;
        color: rgb(231, 228, 15);
        border: 100px;
        border: center;
        border: rgb(0, 0, 0);
        transition: width, 1s;
        border-radius: 120px;
        background: linear-gradient(145deg, #4b55db, #5965ff);
        box-shadow: 41px 41px 82px #212661, -41px -41px 82px #8596ff;
    }
    
    #密码:hover {
        width: 150px;
        border-radius: 1px;
        background: linear-gradient(145deg, #079ddb, #09baff);
        box-shadow: 50px 50px 100px #034661, -50px -50px 100px #0dffff;
    }
    
    #手机号 {
        top: 60px;
        position: absolute;
        left: 500px;
        right: 100;
        background-image: linear-gradient(#90f7ec, #32ccbc);
        width: 100px;
        border-radius: 0px;
        color: rgb(255, 255, 255);
        border: 100px;
        border: center;
        border: rgb(0, 0, 0);
        transition: width, 1s;
    }
    
    #手机号:hover {
        width: 200;
        color: rgb(7, 234, 250)
    }
    
    #注册 {
        position: fixed;
        left: 500;
        right: 100;
        background-image: linear-gradient(#ff0000, #ffffff);
        width: 100px;
        height: 30px;
        border-radius: 100px;
        color: rgb(255, 255, 255);
        border: 100px;
        border: center;
        border: rgb(0, 0, 0);
        transition: height, 1s;
    }
    
    #注册:hover {
        transform: rotateX(50deg);
        color: rgb(255, 255, 255);
        height: 50px;
        width: 100px;
        color: rgb(241, 241, 241);
        background: linear-gradient(145deg, #ff00f2, #ffffff);
        box-shadow: 50px 50px 100px #214e61, -50px -50px 100px #85ffff;
    }
    
    h1 {
        position: absolute;
        left: 505;
        top: -20.5;
        color: white;
        transition: 1s;
    }
    
    h1:hover {
        color: rgb(0, 0, 0);
    }