From 9abaaf4c92f29a13dbdfc7cefc0eb9d94e604e08 Mon Sep 17 00:00:00 2001 From: shuaiplus <2327005759@qq.com> Date: Sun, 25 May 2025 14:31:09 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=AE=E5=8A=A8=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E5=8A=A8=E7=94=BB=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/css/form-animation.css | 25 +++++++++++++++++++++++++ client/css/style.css | 4 +++- client/index.html | 25 +++++++++++++++++++------ 3 files changed, 47 insertions(+), 7 deletions(-) create mode 100644 client/css/form-animation.css diff --git a/client/css/form-animation.css b/client/css/form-animation.css new file mode 100644 index 0000000..4d5fea0 --- /dev/null +++ b/client/css/form-animation.css @@ -0,0 +1,25 @@ +/* 浮动标签动画样式 */ +.input-group { + position: relative; +} + +.input-group .floating-label { + position: absolute; + top: 14px; + left: 16px; + pointer-events: none; +} + +.input-group .floating-label span { + display: inline-block; + font-size: 1.1rem; + color: #888; + transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + min-width: 5px; +} + +.input-group input:focus + .floating-label span, +.input-group input:not(:placeholder-shown) + .floating-label span { + color: #30a8f7; + transform: translateY(-35px); +} diff --git a/client/css/style.css b/client/css/style.css index 6c266f0..7a35a2f 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -935,9 +935,11 @@ body { display: flex; flex-direction: column; align-items: flex-start; + position: relative; + margin-bottom: 10px; } -.input-group label { +.input-group label:not(.floating-label) { font-size: 0.98rem; color: #888; margin-bottom: 6px; diff --git a/client/index.html b/client/index.html index d129bd3..af842bb 100644 --- a/client/index.html +++ b/client/index.html @@ -4,15 +4,28 @@ NodeCrypt + - -
+

Enter a Node

-
-
-
-
+
+ + +
+ + +
+ + +
+