Radiobox.css로 재미있는 애니메이션 라디오 버튼 만들기

그만큼 기본 HTML5 라디오 버튼 꽤 지루합니다. 다음과 같은 방법이 있습니다. 그들을 사용자 정의 CSS3를 사용하지만, 대부분의 기술 외모에만 집중하다.

Radiobox.css 집중하다 외모 과 스타일 라디오 입력에 맞춤 CSS3 애니메이션 추가.

이 라이브러리는 완전히 무료 과 오픈 소스, GitHub에서 다운로드 할 수 있습니다. 이 CSS 라이브러리를 사용하면 12 가지 이상의 다른 애니메이션 라디오 버튼에 적용되는.

맞춤 CSS 스타일이 없으면 정상적인 라디오 입력처럼 보인다.. 그러나 사용자가 버튼을 선택하기 위해 클릭하면 미친 애니메이션 효과를 얻으십시오.. 너는 볼 수있어 실제 예제 이름 옆에 각 스타일을 데모하는 메인 라디오 박스 페이지.

라디오 박스를 설치할 수 있습니다. npm 또는 bower에서 직진., 파일을 컴퓨터에 로컬로 다운로드 할 수도 있습니다. GitHub CDN에서 모든 파일을 호스팅합니다. 아무것도 다운로드하지 않고 놀고 싶다면.

필요한 파일은 radiobox.min.css 어느 쪽이 가야하는지 문서 헤드에 바로 들어가십시오.. 거기에서, 당신은 단지 간단한 클래스를 추가한다. 원하는 애니메이션에 따라 각 라디오 버튼에.

여기에 코드 스 니펫 그 “보잉” 효과:

참고 사항 “보잉” 애니메이션에는 자체 CSS 파일 전화 한 boing.min.css. 이 포함되어야한다. 해당 효과를 페이지에서 사용하려는 경우.

라디오 박스를 다운로드하면 데모 디렉토리를 얻으십시오. 와 이 모든 효과에 대한 라이브 데모. 당신은 간단하게 코드 복사 / 붙여 넣기 번거 로움없이 페이지를 바로 사용할 수 있습니다..

에 대한 전체 문서, 체크 아웃 메인 레포 와 함께 라이브 데모 사이트. 제작자에게 연락하려면 이메일 주소 720kb 웹 사이트 또는 Twitter를 통한 메시지 @ 720kb_.