样式图
代码部分
html
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlelinkhref="css.css"rel="stylesheet"/headbodydivclass="containerright-panel-active"!--SignUp--divclass="container__formcontainer--signup"formaction="#"class="form"id="form1"h2class="form__title"SignUp/h2inputtype="text"placeholder="User"class="input"/inputtype="email"placeholder="Email"class="input"/inputtype="password"placeholder="Password"class="input"/buttonclass="btn"SignUp/button/form/div!--SignIn--divclass="container__formcontainer--signin"formaction="#"class="form"id="form2"h2class="form__title"SignIn/h2inputtype="email"placeholder="Email"class="input"/inputtype="password"placeholder="Password"class="input"/ahref="#"class="link"Forgotyourpassword?/abuttonclass="btn"SignIn/button/form/div!--Overlay--divclass="container__overlay"divclass="overlay"divclass="overlay__paneloverlay--left"buttonclass="btn"id="signIn"SignIn/button/divdivclass="overlay__paneloverlay--right"buttonclass="btn"id="signUp"SignUp/button/div/div/div/divscriptsrc="js.js"/script/body/html
css部分
:root{/*COLORS*/--white:#e9e9e9;--gray:#;--blue:#a6;--lightblue:#;/*RADII*/--button-radius:0.7rem;/*SIZES*/--max-width:px;--max-height:px;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,Oxygen,Ubuntu,Cantarell,"OpenSans","HelveticaNeue",sans-serif;}body{align-items:center;background-color:var(--white);background:url("