Tạo mẫu flat checkbox animation với CSS3

21/07/2017

Bỏ qua những kiểu check box lỗi thời, hãy dành thời gian chỉnh sửa lại các checkbox, nếu như trang web của các bạn đang dùng tới nó. Kiểu checkbox mà mình chia sẻ cho các bạn trong bài viết này được  thực hiện hoàn toàn bằng CSS3, do đó rất dễ chỉnh sửa và rất nhẹ cho trang web hay blog sử dụng.

Tạo mẫu flat checkbox animation với CSS3

Xem Demo | Download

HTML

Để có thể tuỳ chỉnh mặc định hiển thị của checkbox, thủ thuật ở đây là đặt nó nằm bên trong thẻ label như sau :

<label>
  <input type="checkbox">
  <span>Flat checkbox</span> 
</label>

CSS

Và đoạn css sau sẽ định dạng cũng như tạo hiệu ứng đơn giản cho checkbox.

label {
  margin: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1rem;
  height: 1rem;
  background: inherit;
}

input {
  background: tra;
  position: relative;
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
 margin-right: .4rem;
  background: inherit;
}

input:before {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background: inherit;
  cursor: pointer;
}

input:after {
  content: "";
  transition: .4s ease-in-out;
  position: absolute;
  z-index: 1;
  width: 1rem;
  height: 1rem;
 border: .1rem solid rgba(200, 200, 200, .3);
}

input:checked:after {
  transform: rotate(-45deg);
 height: .5rem;
  border-color: #43A047;
  border-top-color: transparent;
  border-right-color: transparent;
}

.anim input:checked:after {
  transform: rotate(-45deg);
 height: .5rem;
  /* border-color: #43A047; */
  border-color: transparent;
  border-right-color: transparent;
  animation: .4s rippling .4s ease;
  animation-fill-mode: forwards;
}


 @keyframes 
rippling { 50% {
 border-left-color: #43A047;
}
 100% {
 border-bottom-color: #43A047;
 border-left-color: #43A047;
}
}

Hy vọng các bạn sẽ thích mẫu thiết kế này.

Tags:

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !