okooooooo/nodecrypt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加浮动标签动画样式

Browse Source
This commit is contained in:
shuaiplus committed 2025-05-25 14:31:09 +08:00
1 parent 221a8c8c50
commit 9abaaf4c92
3 files changed
+47 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/css/form-animation.css
+25
View File
@@ -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);
}
client/css/style.css
+3 -1
View File
@@ -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;
client/index.html
+19 -6
View File
@@ -4,15 +4,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeCrypt</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form-animation.css">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
</head>
<body>
<div class="login-container" id="login-container">
<body> <div class="login-container" id="login-container">
<h1>Enter a Node</h1>
<form id="login-form">
<div class="input-group"> <label for="userName">Username</label> <input id="userName" type="text" autocomplete="username" required minlength="1" maxlength="15"> </div>
<div class="input-group"> <label for="roomName">Node Name</label> <input id="roomName" type="text" required minlength="1" maxlength="15"> </div>
<div class="input-group"> <label for="password">Node Password <span class="optional">(optional)</span></label> <input id="password" type="password" autocomplete="current-password" minlength="1" maxlength="15"> </div> <button type="submit" class="login-btn">ENTER</button>
<form id="login-form"> <div class="input-group">
<input id="userName" type="text" autocomplete="username" required minlength="1" maxlength="15" placeholder="">
<label for="userName" class="floating-label">
<span style="transition-delay:0ms">U</span><span style="transition-delay:50ms">s</span><span style="transition-delay:100ms">e</span><span style="transition-delay:150ms">r</span><span style="transition-delay:200ms">n</span><span style="transition-delay:250ms">a</span><span style="transition-delay:300ms">m</span><span style="transition-delay:350ms">e</span>
</label>
</div> <div class="input-group">
<input id="roomName" type="text" required minlength="1" maxlength="15" placeholder="">
<label for="roomName" class="floating-label">
<span style="transition-delay:0ms">N</span><span style="transition-delay:50ms">o</span><span style="transition-delay:100ms">d</span><span style="transition-delay:150ms">e</span><span style="transition-delay:200ms"> </span><span style="transition-delay:250ms">N</span><span style="transition-delay:300ms">a</span><span style="transition-delay:350ms">m</span><span style="transition-delay:400ms">e</span>
</label>
</div> <div class="input-group">
<input id="password" type="password" autocomplete="current-password" minlength="1" maxlength="15" placeholder="">
<label for="password" class="floating-label">
<span style="transition-delay:0ms">N</span><span style="transition-delay:50ms">o</span><span style="transition-delay:100ms">d</span><span style="transition-delay:150ms">e</span><span style="transition-delay:200ms"> </span><span style="transition-delay:250ms">P</span><span style="transition-delay:300ms">a</span><span style="transition-delay:350ms">s</span><span style="transition-delay:400ms">s</span><span style="transition-delay:450ms">w</span><span style="transition-delay:500ms">o</span><span style="transition-delay:550ms">r</span><span style="transition-delay:600ms">d</span><span style="transition-delay:650ms"> </span><span style="transition-delay:700ms" class="optional">(optional)</span>
</label>
</div>
<button type="submit" class="login-btn">ENTER</button>
</form>
</div>
<div class="container" id="chat-container" style="display:none;">