버튼클릭시 젤리처럼 튕겨지는 효과를 낼 수 있는 css 체크박스를 만들어보자

• input태그가 가지고 있는 효과를 이용해 새로운 체크박스를 만들어 마치 젤리가 움직이는 듯한 체크박스를 만들어 보고자 한다

HTML부분

<label className='checkbox'>
          <input type="checkbox"/>
            <span className="icon"></span>
              <span className="text">Library</span>
          </label>

1.
라벨 태그를 이용해 체크 옆 글씨를 눌러도 체크될 수 있도록 만들어준다.
2.
input태그를 통해 checkbox 타입을 만들어준다.
3.
그리고 하나의 빈 span태그를 만들어주는데 이 태그가 새로운 체크박스를 만들어줄 태그가 된다.
4.
체크박스 옆 text를 입력해줄 span태그를 입력해준다

CSS부분

.checkbox input{
  display: none;
}

• input 부분은 안보이게 설정해준다

.checkbox span{
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: 30px;
}

display: inline-block; -> icon 클래스를 가지고 있는 span태그에 새로운 체크 상자를 만들 수 있다
vertical-align: middle; ->두 span태그의 높이가 달라도 가운데에 위치할 수 있도록 설정한다

.checkbox .icon{
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid #c8ccd4;
  border-radius: 3px;
  transition:.1s ease;
}

• 새로운 체크박스를 만들어준다

.checkbox .icon::after{
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: all .3s ease;
  transition-delay: .15s;
  opacity: 0;
}

• 클릭시 나오는 체크부분을 css를 통해 만들어 준다
  transition-delay: .15s; -> 박스가 빨간색으로 변경된 후 체크가 나오도록 함
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  -> 선 두개를 만들어 45도 기울여 체크를 만들었다

.checkbox input:checked~ .icon{
  border-color: transparent;
  background-color: #ff1616;
  animation: jelly .6s ease;
}

• input태그가 checked일때 테두리를 투명하게 하고 빨간색으로 변경하게 설정한다
  animation: jelly .6s ease; -> jelly라는 애니메이션을 주어 동적인 효과를 준다

.checkbox input:checked~ .icon::after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

• input태그가 checked일 때 체크부분도 설정해준다

@keyframes jelly {
  from {transform: scale(1,1);}
  30%  {transform: scale(1.25, 0.75);}
  40%  {transform: scale(0.75, 1.25);}
  50%  {transform: scale(1.15, 0.85);}
  65%  {transform: scale(0.95, 1.05);}
  75%  {transform: scale(1.05, 0.95);}
  to   {transform: scale(1,1);}
}

• 마지막으로 클릭 시 상자가 마치 젤리처러 움직이는 효과를 주기위해 @keyframes 즉, 애니메이션 효과를 넣어준다

@keyframes

• 사용방법
  @keyframes 이름 {from~to}

0(from)~100%(to)까지의 행동을 적어주면 된다
위의 jelly @keyframes의 경우 가로-세로 늘어나고 줄어들도록 transform:scale 효과를 주었고, 이를 빠르게 애니메이션화하면 마치 젤리처럼 움직이게 보인다.