홈페이지 » 웹 디자인 » Checkbox.css를 사용하여 나만의 Checkbox 애니메이션 효과 스타일 지정

    Checkbox.css를 사용하여 나만의 Checkbox 애니메이션 효과 스타일 지정

    최근 포스트에서 커스텀 라디오 버튼을위한 재미있는 애니메이션 라이브러리를 다루었습니다., CSS로 구동.

    그 무료 라이브러리는 720kb에 의해 풀려 났고 빠르게 보았습니다. Checkbox.css라는 후속 대안. 이 방법은 비슷한 방법으로 작동합니다. 단, HTML 체크 박스 수정 및 애니메이션.

    이 라이브러리는 다음과 같은 라이브러리 모음으로 제공됩니다. 세 가지 목적:

    1. Radiobox.css - 맞춤 라디오 애니메이션
    2. Checkbox.css - 사용자 정의 체크 박스 애니메이션
    3. Checked.css - 기존 선택된 요소의 스타일 및 애니메이션 적용 (라디오 및 체크 박스)

    이들은 모두 동일한 팀에 의해 개발되고 그들은 비슷한 방식으로 작업합니다. 하지만 각 도서관을 개별적으로 포함시키다. 완전한 효과를 얻고 싶다면.

    Checkbox.css GitHub에서 이러한 기능 중 일부와 작동 방식을 확인하십시오. 기본적으로 그들은에 의존합니다. CSS 변환과 함께 2D 변환, 브라우저 지원에 따라.

    이러한 라이브러리에는 JS 대체 메소드가 없으므로 실제로 CSS로 구동되는 애니메이션에서만 작동합니다.. 그러나 데모 페이지를 한눈에 보면 이러한 애니메이션을 페이지에 추가하게되어 매우 기쁩니다..

    프로세스가 더 간단해질 수는 없었습니다. 조금씩 코딩 지식이 필요하다. (비록 일부는 항상 유용하지만).

    CSS 스타일 시트가 페이지에 있으면 형식으로 확인란에 클래스를 추가하기 만하면됩니다. 확인란 x 어디서? “엑스” 원하는 애니메이션을 나타냅니다.. 예를 들어, “도약” 애니메이션 효과 :

      

    가장 중요한 부분은이 라이브러리가 라디오 버튼 형식과 함께 작동, 너무. 원하는 경우 Checked.css 라이브러리를 적극 추천합니다. 기존 선택한 요소에 애니메이션 적용.

    이 모든 의존 관계가 너를 놀라게하지 마라. 거의 모든 사람이 Checkbox.css 라이브러리 또는 관련 라이브러리를 설정할 수 있습니다., 작은 복사 및 붙여 넣기로 처음부터 모두.

    이 입력 애니메이션 라이브러리에 대한 질문이나 제안 사항이있는 경우 제작자에게 해당 사이트 또는 Twitter @ 720kb_를 통해 메시지를 보내보십시오..