问题遇到的现象和发生背景
问题相关代码,请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color:rgb(172, 183, 252) ;
}
a{
text-decoration: none;
font-size: 12px;
color: rgb(200, 200, 200);
}
.main{
margin: 200px auto;
width: 400px;
height: 200px;
border-radius: 10px;
box-shadow: 0px 0px 20px 8px rgba(96, 84, 202,0.5);
transition: 0.5s;
}
.left{
float: left;
width: 280px;
height: 100%;
border-radius: 10px 0px 0px 10px;
background-image: linear-gradient(to top left, rgb(119, 134, 244), rgb(139, 76, 234));
}
.right{
position: relative;
float: left;
width: 120px;
height: 100%;
border-radius: 0px 10px 10px 0px;
background-color: rgb(118, 107, 221);
}
.left .login{
width: 100%;
height: 70px;
font-size: 13px;
overflow: hidden;
}
.left .login h3{
margin: 40px 0px 0px 40px;
color: rgb(230, 230, 230);
}
.left .input_text,.left .forget_password{
width: 100%;
height: 65px;
}
.line{
width: 30.43px;
height: 2px;
margin-left: 40px;
background-color: yellow;
}
.input_text input{
margin-left: 40px;
border: 2px solid rgb(200, 200, 200);
border-width: 0px 0px 2px 0px;
background-color: transparent;
font-weight: normal;
}
.input_text .name{
margin-top: 12px;
margin-bottom: 5px;
}
.input_text input::placeholder{
color: rgb(200, 200, 200);
font-size: 5px;
}
.forget_password{
box-sizing: border-box;
padding-left: 40px;
padding-top: 15px;
}
.right .top{
font-size: 13px;
text-align: center;
}
.right .top h3{
display: inline-block;
margin: 40px 0px 0px 0px ;
color: rgb(230, 230, 230);
}
.right .top .line{
margin: auto;
width: 30.43px;
height: 2px;
background-color: yellow;
}
.main:hover{
/* transform: translate(5px,-5px); */
/* transform: rotate(20deg); */
transform: scale(1.05,1.05);
}
button{
width: 40px;
height: 40px;
margin-top: 30px;
background-color: transparent;
border: 1px solid yellow;
border-radius: 50%;
color: aliceblue;
font-size: 10px;
}
.right .top,.right .buttom{
width: 100%;
height: 100px;
text-align: center;
}
.right .buttom .content{
position: absolute;
top: 0px;
left: 130px;
width: 120px;
height: 200px;
background-image: linear-gradient(to top left, rgb(119, 134, 244), rgb(139, 76, 234));
border-radius: 10px;
transition: 0.8s;
opacity: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div class="login">
<h3>登录</h3>
<div class="line"></div>
</div>
<div class="input_text">
<input type="text" class="name" placeholder="用户名">
<input type="text" class="password" placeholder="密码">
</div>
<div class="forget_password">
<a href="">忘记密码</a>
</div>
</div>
<div class="right">
<div class="top">
<h3>注册</h3>
<div class="line"></div>
</div>
<div class="buttom">
<button class="btn">提交</button>
<div class="content"></div>
</div>
</div>
</div>
<script>
var buttom = document.querySelector('.buttom');
var btn = document.querySelector('.btn');
var content = document.querySelector('.content');
var bb = window.getComputedStyle(content).opacity;
btn.onclick = function(){
content.style.opacity==0?content.style.opacity = '1':content.style.opacity = '0';
this.style.outline ='none';
this.style.transition='1s';
this.style.background='rgba(255, 255, 255,0.3)';
}
</script>
</body>
</html>