Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Hiệu Ứng Input Animation HTML CSS

Cách Tạo Hiệu Ứng Input Animation HTML CSS


Ngày 9 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo animation input button dành cho form bằng HTML và CSS nhé!

HTML

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
   </head>
   <body>
      <div class="container">
         <div class="input-form">
            <input type="text" required>
            <div class="underline"></div>
            <label>Họ Và Tên</label>
         </div>
      </div>
   </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to right, #EF629F, #EECDA3);
}
.container{
  width: 450px;
  background: #fff;
  padding: 30px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .input-form{
  height: 40px;
  width: 100%;
  position: relative;
}
.container .input-form input{
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid silver;
}
.input-form input:focus ~ label,
.input-form input:valid ~ label{
  transform: translateY(-20px);
  font-size: 15px;
  color: #4158d0;
}
.container .input-form label{
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}
.input-form .underline{
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
}
.input-form .underline:before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #4158d0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-form input:focus ~ .underline:before,
.input-form input:valid ~ .underline:before{
  transform: scaleX(1);
}

Và dưới đây là video của kết quả nha!

Còn dưới đây là dự án trên Codepen nhé!

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tìm hiểu thêm nhiều hiệu ứng input khác thì có thể tham khảo ở đây nhé!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách Tạo Input Animation hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!