WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animierte HTML-Eingabe
1114
securearray494
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
1 June 2025
Animiertes Venn-Diagramm
19 October 2024
Animiertes HTML-Anmeldeformular
HTML
Copy
<div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">First Name</label> </div>
CSS
Copy
body{ margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .input-group { position: relative; } .input { border: solid 1.5px #9e9e9e; border-radius: 1rem; background: none; padding: 1rem; font-size: 1rem; color: #f5f5f5; transition: border 150ms cubic-bezier(0.4,0,0.2,1); } .user-label { position: absolute; left: 15px; color: #e8e8e8; pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); } .input:focus, input:valid { outline: none; border: 1.5px solid #1a73e8; } .input:focus ~ label, input:valid ~ label { transform: translateY(-50%) scale(0.8); background-color: #212121; padding: 0 .2em; color: #2196f3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
