|
|
@@ -1,321 +0,0 @@
|
|
|
-<%@ page contentType="text/html; charset=gb2312"%>
|
|
|
-<!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>SHIXUN</title>
|
|
|
- <!-- 导入字体图标 -->
|
|
|
- <link rel="stylesheet" href="./font_mw3z7ts489g/iconfont.css">
|
|
|
-
|
|
|
- <style>
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- /* 字体无法选中 */
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
- body {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- background-color: #ecf0f3;
|
|
|
- color: #a0a5a8;
|
|
|
- }
|
|
|
-
|
|
|
- .shell {
|
|
|
- position: relative;
|
|
|
- width: 1000px;
|
|
|
- min-width: 1000px;
|
|
|
- min-height: 600px;
|
|
|
- height: 600px;
|
|
|
- padding: 25px;
|
|
|
- background-color: #ecf0f3;
|
|
|
- box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设置响应式 */
|
|
|
- @media (max-width: 1200px) {
|
|
|
- .shell {
|
|
|
- transform: scale(0.7);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 1000px) {
|
|
|
- .shell {
|
|
|
- transform: scale(0.6);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 800px) {
|
|
|
- .shell {
|
|
|
- transform: scale(0.5);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 600px) {
|
|
|
- .shell {
|
|
|
- transform: scale(0.4);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .container {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 600px;
|
|
|
- height: 100%;
|
|
|
- padding: 25px;
|
|
|
- background-color: #ecf0f3;
|
|
|
- transition: 1.25s;
|
|
|
- }
|
|
|
-
|
|
|
- .form {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- margin: 0 5px;
|
|
|
- border: rgba(0, 0, 0, 0.5) 2px solid;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 25px;
|
|
|
- padding: 3px;
|
|
|
- opacity: 0.5;
|
|
|
- transition: 0.1s;
|
|
|
- }
|
|
|
-
|
|
|
- .iconfont:hover {
|
|
|
- opacity: 1;
|
|
|
- transition: 0.15s;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .form_input {
|
|
|
- width: 350px;
|
|
|
- height: 40px;
|
|
|
- margin: 4px 0;
|
|
|
- padding-left: 25px;
|
|
|
- font-size: 13px;
|
|
|
- letter-spacing: 0.15px;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- background-color: #ecf0f3;
|
|
|
- transition: 0.25s ease;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
|
|
|
- }
|
|
|
-
|
|
|
- .form_input:focus {
|
|
|
- box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
|
|
|
- }
|
|
|
-
|
|
|
- .form_span {
|
|
|
- margin-top: 30px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .form_link {
|
|
|
- color: #181818;
|
|
|
- font-size: 15px;
|
|
|
- margin-top: 25px;
|
|
|
- border-bottom: 1px solid #a0a5a8;
|
|
|
- line-height: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 34px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 3;
|
|
|
- color: #181818;
|
|
|
- letter-spacing: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .description {
|
|
|
- font-size: 14px;
|
|
|
- letter-spacing: 0.25px;
|
|
|
- text-align: center;
|
|
|
- line-height: 1.6;
|
|
|
- }
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 180px;
|
|
|
- height: 50px;
|
|
|
- border-radius: 25px;
|
|
|
- margin-top: 50px;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 14px;
|
|
|
- letter-spacing: 1.15px;
|
|
|
- background-color: #4B70E2;
|
|
|
- color: #f9f9f9;
|
|
|
- box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- .a-container {
|
|
|
- z-index: 100;
|
|
|
- left: calc(100% - 600px);
|
|
|
- }
|
|
|
-
|
|
|
- .b-container {
|
|
|
- left: calc(100% - 600px);
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .switch {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 100%;
|
|
|
- width: 400px;
|
|
|
- padding: 50px;
|
|
|
- z-index: 200;
|
|
|
- transition: 1.25s;
|
|
|
- background-color: #ecf0f3;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
|
|
|
- }
|
|
|
-
|
|
|
- .switch_circle {
|
|
|
- position: absolute;
|
|
|
- width: 500px;
|
|
|
- height: 500px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #ecf0f3;
|
|
|
- box-shadow: inset 8px 8px 12px #b8bec7, inset -8px -8px 12px #fff;
|
|
|
- bottom: -60%;
|
|
|
- left: -60%;
|
|
|
- transition: 1.25s;
|
|
|
- }
|
|
|
-
|
|
|
- .switch_circle-t {
|
|
|
- top: -30%;
|
|
|
- left: 60%;
|
|
|
- width: 300px;
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
-
|
|
|
- .switch_container {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- position: absolute;
|
|
|
- width: 400px;
|
|
|
- padding: 50px 55px;
|
|
|
- transition: 1.25s;
|
|
|
- }
|
|
|
-
|
|
|
- .switch_button {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .switch_button:hover,
|
|
|
- .submit:hover {
|
|
|
- box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
|
|
|
- transform: scale(0.985);
|
|
|
- transition: 0.25s;
|
|
|
- }
|
|
|
-
|
|
|
- .switch_button:active,
|
|
|
- .switch_button:focus {
|
|
|
- box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
|
|
|
- transform: scale(0.97);
|
|
|
- transition: 0.25s;
|
|
|
- }
|
|
|
-
|
|
|
- .is-txr {
|
|
|
- left: calc(100% - 400px);
|
|
|
- transition: 1.25s;
|
|
|
- transform-origin: left;
|
|
|
- }
|
|
|
-
|
|
|
- .is-txl {
|
|
|
- left: 0;
|
|
|
- transition: 1.25s;
|
|
|
- transform-origin: right;
|
|
|
- }
|
|
|
-
|
|
|
- .is-z {
|
|
|
- z-index: 200;
|
|
|
- transition: 1.25s;
|
|
|
- }
|
|
|
-
|
|
|
- .is-hidden {
|
|
|
- visibility: hidden;
|
|
|
- opacity: 0;
|
|
|
- position: absolute;
|
|
|
- transition: 1.25s;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- @keyframes is-gx {
|
|
|
-
|
|
|
- 0%,
|
|
|
- 10%,
|
|
|
- 100% {
|
|
|
- width: 400px;
|
|
|
- }
|
|
|
-
|
|
|
- 30%,
|
|
|
- 50% {
|
|
|
- width: 500px;
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
-<div class="shell">
|
|
|
- <div class="container a-container" id="a-container">
|
|
|
- <form action="" method="post" class="form" id="a-form">
|
|
|
- <h2 class="form_title title">Create new account</h2>
|
|
|
- <div class="form_icons">
|
|
|
-
|
|
|
- </div>
|
|
|
- <span class="form_span">It’s quick and easy. </span>
|
|
|
- <input type="text" class="form_input" placeholder="Email" name="email">
|
|
|
- <input type="text" class="form_input" placeholder="Password" name="pwd">
|
|
|
- <br/>
|
|
|
- <button class="form_button button submit">SIGN UP</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="switch" id="switch-cnt">
|
|
|
- <div class="switch_circle"></div>
|
|
|
- <div class="switch_circle switch_circle-t"></div>
|
|
|
- <div class="switch_container" id="a">
|
|
|
- <h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
|
|
|
- <p class="switch_description description">Crate a new account become on of us！</p>
|
|
|
- <button class="form_button button submit" onclick="location.href='controllerlogin.jsp'">SIGN IN</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-</body>
|
|
|
-
|
|
|
-</html>
|
|
|
-</body>
|
|
|
-
|
|
|
-</html>
|
sanaaaa