IrisVega/html-re
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: public/index.html

Browse Source 
modified:   public/style.css
This commit is contained in:
IrisVega 2024-07-13 10:05:11 +08:00
parent 3331aa1d7f
commit ed13304962
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -6,7 +6,7 @@
<link rel="stylesheet" href="normalize.min.css"> <link rel="stylesheet" href="normalize.min.css">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
<div class="container right-panel-active"> <div class="container right-panel-active">
<!-- 注册 --> <!-- 注册 -->
<div class="container_form container--signup"> <div class="container_form container--signup">

15
public/style.css
View File

@ -51,6 +51,7 @@ body {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.4);
} }
.container_form { .container_form {
@ -58,16 +59,19 @@ body {
position: absolute; position: absolute;
top: 0; top: 0;
transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;
background-color: rgba(255, 255, 255, 0.4);
} }
.container--signin { .container--signin {
left: 0; left: 0;
width: 50%; width: 50%;
z-index: 5; z-index: 5;
background-color: rgba(255, 255, 255, 0.4);
} }
.container.right-panel-active .container--signin { .container.right-panel-active .container--signin {
transform: translateX(100%); transform: translateX(100%);
background-color: rgba(255, 255, 255, 0.4);
} }
.container--signup { .container--signup {
@ -75,6 +79,7 @@ body {
opacity: 0; opacity: 0;
width: 50%; width: 50%;
z-index: 4; z-index: 4;
background-color: rgba(255, 255, 255, 0.4);
} }
.container.right-panel-active .container--signup { .container.right-panel-active .container--signup {
@ -82,6 +87,7 @@ body {
opacity: 1; opacity: 1;
transform: translateX(100%); transform: translateX(100%);
z-index: 8; z-index: 8;
background-color: rgba(255, 255, 255, 0.4);
} }
.container_overlay { .container_overlay {
@ -93,10 +99,12 @@ body {
transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out;
width: 50%; width: 50%;
z-index: 100; z-index: 100;
background-color: rgba(255, 255, 255, 0.4);
} }
.container.right-panel-active .container_overlay { .container.right-panel-active .container_overlay {
transform: translateX(-100%); transform: translateX(-100%);
background-color: rgba(255, 255, 255, 0.4);
} }
.overlay { .overlay {
@ -111,10 +119,12 @@ body {
transform: translateX(0); transform: translateX(0);
transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out;
width: 200%; width: 200%;
background-color: rgba(255, 255, 255, 0.4);
} }
.container.right-panel-active .overlay { .container.right-panel-active .overlay {
transform: translateX(50%); transform: translateX(50%);
background-color: rgba(255, 255, 255, 0.4);
} }
.overlay_panel { .overlay_panel {
@ -129,23 +139,28 @@ body {
transform: translateX(0); transform: translateX(0);
transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out;
width: 50%; width: 50%;
background-color: rgba(255, 255, 255, 0.4);
} }
.overlay--left { .overlay--left {
transform: translateX(-20%); transform: translateX(-20%);
background-color: rgba(255, 255, 255, 0.4);
} }
.container.right-panel-active .overlay--left { .container.right-panel-active .overlay--left {
transform: translateX(0); transform: translateX(0);
background-color: rgba(255, 255, 255, 0.4);
} }
.overlay--right { .overlay--right {
right: 0; right: 0;
transform: translateX(0); transform: translateX(0);
background-color: rgba(255, 255, 255, 0.4);
} }
.container.right-panel-active .overlay--right { .container.right-panel-active .overlay--right {
transform: translateX(20%); transform: translateX(20%);
background-color: rgba(255, 255, 255, 0.4);
} }
.btn { .btn {