html 我怎样才能使它，当这个按钮被按下，登录部分完全覆盖了注册部分？

我在css中有一个效果，就是当你按下“登录”按钮时，它的所有内容都会与注册部分的内容重叠，但是登录部分并没有覆盖整个注册部分，因此，当你按下“登录”按钮时，窗口重叠时，你仍然可以看到注册部分的一小部分。当你按下按钮时，我如何使登录占据整个盒子？
html和css附件
超文本标记语言

<!DOCTYPE html>
<html>
<head>
    <title>Slide Navbar</title>
    <link rel="stylesheet" type="text/css" href="./styles/login.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="main">      
        <input type="checkbox" id="chk" aria-hidden="true">

            <div class="signup">
                <form>
                    
                    <input type="text" name="text" placeholder="¿como te llamas?" required="">
                    <input type="email" name="email" placeholder=" ingresa tu correo electronico" required="">
                    <input type="text" name="text" placeholder="¿ingresa tu numero de telefono" required="">
                    <input type="password" name="pswd" placeholder=" crea una contraseña" required="">
                    <input type="password" name="pswd" placeholder="repite tu contraseña" required="">
                    <a class="tyc" href="">terminos y condiciones</a>
                    <style>.tyc{
                        text-align: center;
                        justify-content: center;
                        text-decoration: none;
                        margin-left: 90px;  
                    }
                    </style>
                
                    <button class="register">REGISTRATE</button>
                    <style>.register{
                        margin-top: 7px;
                    }

                    </style>
                </form>
            </div>

            <div class="login">
                <form>
                    <label for="chk" aria-hidden="true">inicia sesion</label>
                    <input type="email" name="email" placeholder="Email " required="">
                    <input type="password" name="pswd" placeholder="Password" required="">
                    <button>Login</button>
                </form>
            </div>
    </div>
</body>
</html>

字符串
CSS

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Jost', sans-serif;
background: linear-gradient(to bottom, #e57373, #ffb74d, #cfd8dc);
}
.main{
    width: 350px;
    height: 500px;
    background: red;
    overflow: hidden;
    background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
    border-radius: 10px;
    box-shadow: 5px 20px 50px #000;
}
#chk{
    display: none;
}
.signup{
    position: relative;
    width:100%;
    height: 100%;
    size: 70%;
}
label{
    color: #fff;
    font-size: 2.3em;
    justify-content: center;
    display: flex;
    margin: 60px;
    font-weight: bold;
    cursor: pointer;
    transition: .5s ease-in-out;
}
input{
    width: 60%;
    height: 20px;
    background: #e0dede;
    justify-content: center;
    display: flex;
    margin: 20px auto;
    padding: 10px;
    border: none;
    outline: none;
    border-radius: 5px;
}
button{
    width: 50%;
    height: 40px;
    margin: 10px auto;
    justify-content: center;
    display: block;
    color: #fff;
    background: #573b8a;
    font-size: 1em;
    font-weight: bold;
    margin-top: 20px;
    outline: none;
    border: none;
    border-radius: 15px;
    transition: .2s ease-in;
    cursor: pointer;
}
button:hover{
    background: #6d44b8;
}
.login{
    height: 460px;
    background: #eee;
    border-radius: 60% / 10%;
    transform: translateY(-180px);
    transition: .8s ease-in-out;
}
.login label{
    color: #573b8a;
    transform: scale(.6);
}

#chk:checked ~ .login{
    transform: translateY(-500px);
}
#chk:checked ~ .login label{
    transform: scale(1);    
}
#chk:checked ~ .signup label{
    transform: scale(.6);
}

型
非常感谢您的关注：）
我已经尝试在我的css代码中修改几个值，现在我还没有找到解决方案：c

请看下面的片段！希望这对你有帮助。

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Jost', sans-serif;
  background: linear-gradient(to bottom, #e57373, #ffb74d, #cfd8dc);
}

.main {
  width: 350px;
  height: 500px;
  background: red;
  overflow: hidden;
  background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
  border-radius: 10px;
  box-shadow: 5px 20px 50px #000;
}

#chk {
  display: none;
}

.signup {
  position: relative;
  width: 100%;
  height: 100%;
  size: 70%;
}

label {
  color: #fff;
  font-size: 2.3em;
  justify-content: center;
  display: flex;
  margin: 60px;
  font-weight: bold;
  cursor: pointer;
  transition: .5s ease-in-out;
}

input {
  width: 60%;
  height: 20px;
  background: #e0dede;
  justify-content: center;
  display: flex;
  margin: 20px auto;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 5px;
}

button {
  width: 50%;
  height: 40px;
  margin: 10px auto;
  justify-content: center;
  display: block;
  color: #fff;
  background: #573b8a;
  font-size: 1em;
  font-weight: bold;
  margin-top: 20px;
  outline: none;
  border: none;
  border-radius: 15px;
  transition: .2s ease-in;
  cursor: pointer;
}

button:hover {
  background: #6d44b8;
}

.login {
  height: 460px;
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(-180px);
  transition: .8s ease-in-out;
}

.login label {
  color: #573b8a;
  transform: scale(.6);
}

#chk:checked~.login {
  transform: translateY(-580px);
  height: 500px;
  border-radius: 0;
}

#chk:checked~.login label {
  transform: scale(1);
}

#chk:checked~.signup label {
  transform: scale(.6);
}

个字符

html 我怎样才能使它，当这个按钮被按下，登录部分完全覆盖了注册部分？

1条答案

相关问题

热门标签

最新问答