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

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.

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;
  awidth: 1.2rem;
  height: 1.2rem;
 margin-right: .4rem;
  background: inherit;
}

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

input:after {
  content: "";
  transition: .4s ease-in-out;
  position: absolute;
  z-index: 1;
  awidth: 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.

Chuyên Mục: Css

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