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="./style.css">
</head>
<body>
<body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
<div class="container right-panel-active">
<!-- 注册 -->
<div class="container_form container--signup">

15
public/style.css
View File

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