Animated Login Form đơn giản bằng HTML, CSS
Trong thế giới phát triển web, tạo ra các giao diện đẹp và thú vị là
một phần quan trọng. Một phần quan trọng của giao diện người dùng là
mẫu đăng nhập với hiệu ứng hoạt hình. Trong bài viết này, chúng ta sẽ
tìm hiểu cách tạo một mẫu đăng nhập với hiệu ứng hoạt hình bằng HTML
và CSS.
Để bắt đầu, chúng ta sẽ tạo một mẫu đơn giản gồm hai trường nhập liệu:
một cho tên người dùng và một cho mật khẩu. Sử dụng HTML, chúng ta tạo
form với hai trường input và một nút đăng nhập. Sau đó, sử dụng CSS,
chúng ta sẽ thiết lập kiểu dáng cho form và thêm hiệu ứng hoạt hình
khi người dùng tương tác.
Để thực hiện hiệu ứng hoạt hình, chúng ta sẽ sử dụng CSS transitions
và animations. Khi người dùng di chuyển chuột vào trường nhập liệu,
chúng ta sẽ thay đổi màu nền và tạo hiệu ứng dịch chuyển nhẹ. Ngoài
ra, khi người dùng nhập thông tin và nhấn nút đăng nhập, chúng ta cũng
có thể thêm hiệu ứng để tạo trải nghiệm thú vị hơn.
Tóm lại, trong bài viết này, chúng ta sẽ học cách tạo một mẫu đăng
nhập đơn giản nhưng sử dụng hiệu ứng hoạt hình để làm cho giao diện
trở nên sinh động hơn. Bằng cách kết hợp HTML và CSS, bạn có thể tạo
ra các giao diện tương tác thú vị cho trang web của mình.
Hy vọng bài viết sẽ giúp bạn hiểu rõ hơn về cách tạo animated login
form bằng HTML và CSS. Chúc bạn thành công trong việc phát triển giao
diện web độc đáo của mình!
Bước 1: Thêm HTML
<div class="container"> <div class="borderLine"></div> <div class="borderLine"></div> <div class="borderLine"></div> <div class="borderLine"></div> <form> <h2>Sign in</h2> <div class="inputBox"> <input type="text" required> <span>Username</span> <i></i> </div> <div class="inputBox"> <input type="password" required> <span>Password</span> <i></i> </div> <div class="links"> <a href="#">Forgot Password</a> <a href="#">Sign up</a> </div> <input type="submit" value="Login"> </form> </div>
Bước 2: Thêm CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: rgb(24, 28, 33); font-family: 'Poppins', sans-serif; } .container { position: relative; width: 380px; height: 420px; background-color: rgb(15, 17, 21); border-radius: 8px; overflow: hidden; } .container .borderLine:nth-child(1) { position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, #97FFF4, #97FFF4, #97FFF4); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; } .container .borderLine:nth-child(2) { position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, #97FFF4, #97FFF4, #97FFF4); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: -3s; } .container .borderLine:nth-child(3) { position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, #C70039, #C70039, #C70039); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: -1.5s; } .container .borderLine:nth-child(4) { position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, #C70039, #C70039, #C70039); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: -4.5s; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container form { position: absolute; inset: 4px; background-color: rgb(36, 42, 50); padding: 50px 40px; border-radius: 8px; display: flex; flex-direction: column; z-index: 10; } .container form h2 { color: #fff; font-weight: 500; text-align: center; letter-spacing: 2px; } .container form .inputBox { position: relative; width: 300px; margin-top: 35px; } .container form .inputBox input { position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; outline: none; border: none; color: #23242a; font-size: 16px; letter-spacing: 1px; transition: all 0.5s; z-index: 10; } .container form .inputBox span { position: absolute; left: 0; padding: 20px 10px 10px; pointer-events: none; color: #8f8f8f; font-size: 16px; letter-spacing: 1px; transition: all 0.5s; } .container form .inputBox input:focus ~ span, .container form .inputBox input:valid ~ span { color: #fff; font-size: 12px; transform: translateY(-34px); } .container form .inputBox i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; overflow: hidden; transition: all 0.5s; } .container form .inputBox input:focus ~ i, .container form .inputBox input:valid ~ i { height: 44px; } .container form .links { display: flex; justify-content: space-between; } .container form .links a { margin: 10px 0; font-size: 14px; color: #8f8f8f; text-decoration: none; } .container form .links a:hover, .container form .links a:nth-child(2){ color: #fff; } .container form input[type="submit"] { border: none; outline: none; padding: 9px 25px; background-color: #fff; border-radius: 2px; font-size: 14px; width: 100px; margin-top: 10px; cursor: pointer; } .container form input[type="submit"]:active { opacity: 0.8; }
Full tutorial:
Hoàn thành
Tóm lại, việc tạo một animated login form đơn giản bằng HTML và CSS không chỉ tạo nên một giao diện trực quan hơn mà còn tăng tính tương tác của trang web. Bằng cách sử dụng transitions và animations trong CSS, bạn có thể thêm những hiệu ứng nhẹ nhàng vào các phần tử của form, tạo nên trải nghiệm người dùng thú vị hơn. Đừng ngần ngại thử nghiệm và tùy chỉnh theo ý tưởng của riêng bạn để tạo ra một giao diện đăng nhập độc đáo và thu hút.
Hy vọng qua hướng dẫn này, bạn đã có thêm kiến thức và ý tưởng để phát triển giao diện web của mình. Hãy tiếp tục khám phá và nâng cao kỹ năng lập trình để tạo ra những sản phẩm tuyệt vời.
Chúc bạn thành công và sáng tạo!
No comments: