Trang đăng nhập hoạt hình bằng HTML, CSS và JavaScript

    Rating: ★★★★☆
    View: 88
    Download: 112

    Trong hình thức đăng nhập hoạt hình này, nó được đóng gói với các tính năng như:

    1. 100% responsive

    2. Tương thích trên tất cả các thiết bị

    3. Ngôn ngữ được sử dụng HTML5, CSS3 và JavaScript

    4. Hoạt hình tương tác với hình ảnh đẳng cự

    Hãy bắt đầu xây dựng Mẫu đăng nhập đáp ứng này .

    # HTML

    <img class="wave" src="img/wave.png" />
    <div class="container">
      <div class="img"></div>
      <div class="login-content">
        ....
      </div>
    </div>

    Trong đánh dấu này, chúng tôi đã xác định cấu trúc của biểu mẫu đăng nhập css sẽ được xây dựng bằng hoạt hình css. Ngoài ra hình thức đăng nhập hoạt hình này hoàn toàn đáp ứng & tích hợp với phông chữ tuyệt vời trong trường đầu vào để mang lại cái nhìn chuyên nghiệp hơn.

    Bây giờ hãy xác định cấu trúc của hình thức đăng nhập.

    <form action="index.html">
      <img src="img/avatar.svg" />
      <h2 class="title">Howdy!!</h2>
      <div class="input-div one">
        <div class="i">
          <i class="fas fa-user"></i>
        </div>
        <div class="div">
          <h5>Username</h5>
          <input type="text" class="input" />
        </div>
      </div>
      <div class="input-div pass">
        <div class="i">
          <i class="fas fa-lock"></i>
        </div>
        <div class="div">
          <h5>Password</h5>
          <input type="password" class="input" />
        </div>
      </div>
      <a href="#">Forgot Password?</a>
      <input type="submit" class="btn" value="Login" />
    </form>

    # CSS

    Bây giờ, cấu trúc biểu mẫu đăng nhập là tất cả được thiết lập. Đã đến lúc tạo kiểu cho nó và cung cấp cho họ các hiệu ứng sẽ trông giống như hình thức đăng nhập thực tế.
     

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: "Poppins", sans-serif;
      overflow: hidden;
    }
    
    .wave {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 100%;
      z-index: -1;
    }
    
    .container {
      width: 100vw;
      height: 100vh;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 7rem;
      padding: 0 2rem;
    }
    
    .img {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    
    .login-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
    }
    
    .img img {
      width: 500px;
    }
    
    form {
      width: 360px;
    }
    
    .login-content img {
      height: 100px;
    }
    
    .login-content h2 {
      margin: 15px 0;
      color: #333;
      text-transform: uppercase;
      font-size: 2.9rem;
    }
    
    .login-content .input-div {
      position: relative;
      display: grid;
      grid-template-columns: 7% 93%;
      margin: 25px 0;
      padding: 5px 0;
      border-bottom: 2px solid #d9d9d9;
    }
    
    .login-content .input-div.one {
      margin-top: 0;
    }
    
    .i {
      color: #d9d9d9;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .i i {
      transition: 0.3s;
    }
    
    .input-div > div {
      position: relative;
      height: 45px;
    }
    
    .input-div > div > h5 {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      font-size: 18px;
      transition: 0.3s;
    }
    
    .input-div:before,
    .input-div:after {
      content: "";
      position: absolute;
      bottom: -2px;
      width: 0%;
      height: 2px;
      background-color: coral;
      transition: 0.4s;
    }
    
    .input-div:before {
      right: 50%;
    }
    
    .input-div:after {
      left: 50%;
    }
    
    .input-div.focus:before,
    .input-div.focus:after {
      width: 50%;
    }
    
    .input-div.focus > div > h5 {
      top: -5px;
      font-size: 15px;
    }
    
    .input-div.focus > .i > i {
      color: coral;
    }
    
    .input-div > div > input {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: none;
      padding: 0.5rem 0.7rem;
      font-size: 1.2rem;
      color: #555;
      font-family: "poppins", sans-serif;
    }
    
    .input-div.pass {
      margin-bottom: 4px;
    }
    
    a {
      display: block;
      text-align: right;
      text-decoration: none;
      color: #999;
      font-size: 0.9rem;
      transition: 0.3s;
    }
    
    a:hover {
      color: coral;
    }
    
    .btn {
      display: block;
      width: 100%;
      height: 50px;
      border-radius: 25px;
      outline: none;
      border: none;
      background-image: linear-gradient(to right, #e88747, coral, #e88747);
      background-size: 200%;
      font-size: 1.2rem;
      color: #fff;
      font-family: "Poppins", sans-serif;
      text-transform: uppercase;
      margin: 1rem 0;
      cursor: pointer;
      transition: 0.5s;
    }
    .btn:hover {
      background-position: right;
    }  

    Điều này sẽ phong cách lên hình thức đăng nhập. Cũng được sử dụng hình ảnh isometric ở định dạng SVG sẽ trông chuyên nghiệp hơn với hình thức đăng nhập. Bây giờ, CSS ở trên được sử dụng để tạo kiểu đăng nhập nhưng đã đến lúc làm cho biểu mẫu đăng nhập đáp ứng bằng truy vấn phương tiện/screen media

    @media screen and (max-width: 1050px) {
      .container {
        grid-gap: 5rem;
      }
    }
    
    @media screen and (max-width: 1000px) {
      form {
        width: 290px;
      }
    
      .login-content h2 {
        font-size: 2.4rem;
        margin: 8px 0;
      }
    
      .img img {
        width: 400px;
      }
    }
    
    @media screen and (max-width: 900px) {
      .container {
        grid-template-columns: 1fr;
      }
    
      .img {
        display: none;
      }
    
      .wave {
        display: none;
      }
    
      .login-content {
        justify-content: center;
      }
    }

    # JavaScript

    Đã đến lúc, một số hiệu ứng hoạt hình cho hình thức đăng nhập này bằng cách sử dụng javascript. Chúng tôi sẽ sử dụng hiệu ứng khi người dùng nhấp vào trường đầu vào sau đó hiệu ứng màu trên trường đó sẽ kích hoạt cho mã được xác định bên dưới.

    const inputs = document.querySelectorAll(".input");
    
    function addClass() {
      let parent = this.parentNode.parentNode;
      parent.classList.add("focus");
    }
    
    function removeClass() {
      let parent = this.parentNode.parentNode;
      if (this.value == "") {
        parent.classList.remove("focus");
      }
    }
    
    inputs.forEach((input) => {
      input.addEventListener("focus", addClass);
      input.addEventListener("blur", removeClass);
    });        

    Bạn sẽ nhận được tất cả các tệp , khi bạn tải xuống mã nguồn . Và sau hơn bạn có thể chỉnh sửa nó theo bạn

    nếu bạn gặp phải bất kỳ vấn đề nào bạn có thể liên hệ bằng cách đặt câu hỏi với liên kết bài viết.

    Bạn có thể xem qua Demo cũng như Tải xuống mã nguồn cho cùng và thực hiện các thay đổi theo bạn

    loading Đang tải...

    template được ưa chuộng