인생학개론www.moksunung.com

CSS를 이용하여 INPUT에 애니메이션 효과주기

CSS의 transition 을 이용하여 애니메이션 효과를 만드는 예제입니다. 예제에 이미 HTML과 CSS에 대한 코드가 들어있으므로 앞으로는 코드를 늘어놓는 장황한 설명없이 기본적인 원리만 설명하고, 댓글로 달리는 질문에 답변드리는 방법으로 포스팅을 하겠습니다. (설명하는 글재주가 없어서요.) 이번에 올리는 체크박스와 라디오 예제들의 원리는 같습니다. 디자인을 변경할 수 없는 input은 display를 none으로 하여 감추고, input에 label을 엮은 뒤에 label과 input 의 가상클래스(Pseudo-class) :checked 를 디자인 하는 것입니다.

예제 1)

See the Pen input radio #0 by moksunung (@moksunung) on CodePen.

input은 디자인할 수 없기에 display:none; 하여 감춥니다. input의 id와 label의 for 속성값을 일치시켜 인풋과 라벨을 묶고 label의 기본을 디자인합니다. label 안에는 폰트어썸 글리피콘과, span으로 텍스트를 넣었습니다.  글리피콘과 텍스트의 기본 디자인을 글리피콘은 opacity값을 0으로 하여 감추고, 텍스트는 적절히 가운데 위치할 수 있도록 transform : traslateX(-값); 을 줍니다. 그리고 해당인풋이 check 상태일 때 글리피콘의 opacity를 1로하여 나타나도록 ,span의 위치를 원상복귀(transform : traslateX(0);) 되도록 코딩합니다.

예제 2)

See the Pen input radio #1 by moksunung (@moksunung) on CodePen.

input은 디자인 할 수 없기에 display:none; 하여 감춥니다. input의 id와 label의 for 속성값을 일치시켜 인풋과 라벨을 묶고 label의 기본 디자인을 완성합니다. 여기서는 label 가상선택자 ::before 에 네모 단색 글리피콘을 넣어 디자인했습니다. 디자인의 기본크기는 transform:scale3d(값,값,값); 에서 1보다 조금 작게 해두고, hover했을 때, 1로 돌아오게 check 되었을 때 글리피콘이 단색 글리피콘이 아닌 체크박스 글리피콘이 나타나게 합니다.

CSS는 기본적인 원리만 파악해두면 다음은 퍼블리셔가 응용하기에 따라 무궁무진하게 표현될 수 있습니다. 설명이 조금 부실한데 궁금한 내용은 댓글로 주시면 답변드리겠습니다.