Trở về

Sign In/Up Form Transitions cực cool với CSS3

bởi Vi Nè

Hôm nay, mình sẽ chia sẻ cho các bạn một đoạn css3 có thể giúp các bạn tạo hiệu ứng transition cho form đăng nhập/xuất mà các bạn thường dùng trên trang web, blog.

Như thường lệ, chúng ta sẽ bắt đầu bằng việc tạo form, các bạn copy theo khung chuẩn html như sau :

<form>
  <input checked id='signin' name='action' type='radio' value='signin'>
  <label for='signin'>Sign in</label>
  <input id='signup' name='action' type='radio' value='signup'>
  <label for='signup'>Sign up</label>
  <input id='reset' name='action' type='radio' value='reset'>
  <label for='reset'>Reset</label>
  <div id='wrapper'>
    <div id='arrow'></div>
    <input id='email' placeholder='Email' type='text'>
    <input id='pass' placeholder='Password' type='password'>
    <input id='repass' placeholder='Repeat password' type='password'>
  </div>
  <button type='submit'>
    <span>
      Reset password
      <br>
      Sign in
      <br>
      Sign up
    </span>
  </button>
</form>

Và công việc của các bạn cũng cực kỳ đơn giản là copy lại đoạn css bên dưới để tạo hiệu ứng cho form, các bạn có thể tham khảo từng đoạn để xem cách mà người ta tạo hiệu ứng như thế nào, từ đó các bạn có thể sáng tạo theo cách của riêng mình.

body, html {
  margin: 0;
  padding: 0;
}
 
html, body { margin: 0; }
 
:focus { outline: none; }
::-webkit-input-placeholder { color: #DEDFDF; }
::-moz-placeholder { color: #DEDFDF; }
:-moz-placeholder { color: #DEDFDF; }
::-ms-input-placeholder { color: #DEDFDF; }
 
body {
  background: #6ED0F6;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
}
 
#wrapper, label, #arrow, button span { transition: all .5s cubic-bezier(.6,0,.4,1); }
 
#wrapper { overflow: hidden; }
 
#signin:checked ~ #wrapper { height: 178px; }
#signin:checked ~ #wrapper #arrow { left: 32px; }
#signin:checked ~ button span { transform: translate3d(0,-72px,0); }
 
#signup:checked ~ #wrapper { height: 262px; }
#signup:checked ~ #wrapper #arrow { left: 137px; }
#signup:checked ~ button span { transform: translate3d(0,-144px,0); }
 
#reset:checked ~ #wrapper { height: 94px; }
#reset:checked ~ #wrapper #arrow { left: 404px; }
#reset:checked ~ button span { transform: translate3d(0,0,0); }
 
form {
  width: 450px;
  height: 370px;
  margin: -185px -225px;
  position: absolute;
  left: 50%;
  top: 50%;
}
 
input[type=radio] { display: none; }
 
label {
  cursor: pointer;
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  opacity: .5;
  margin-bottom: 30px;
  text-transform: uppercase;
}
label:hover {
  transition: all .3s cubic-bezier(.6,0,.4,1);
  opacity: 1;
}
label[for="signin"] { margin-right: 20px; }
label[for="reset"] { float: right; }
input[type=radio]:checked + label { opacity: 1; }
 
input[type=text],
input[type=password] {
  background: #fff;
  border: none;
  border-radius: 8px;
  font-size: 27px;
  font-family: 'Raleway', sans-serif;
  height: 72px;
  width: 99.5%;
  margin-bottom: 10px;
  opacity: 1;
  text-indent: 20px;
  transition: all .2s ease-in-out;
}
button {
  background: #079BCF;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 27px;
  height: 72px;
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all .3s cubic-bezier(.6,0,.4,1);
}
button span {
  display: block;
  line-height: 72px;
  position: relative;
  top: -2px;
  transform: translate3d(0,0,0);
}
button:hover {
  background: #007BA5;
}
 
#arrow {
  height: 0;
  width: 0;
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: relative;
  left: 32px;
}
 
 
#hint {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
}
Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon