CSS 3 확인란 애니메이션

CSS 3 확인란 애니메이션
이 예는 두 가지 선택 단추 애니메이션 효과를 실현했다. 하나는 이동이고 하나는 슬라이더이다. 다음은 html 레이아웃과 css 양식이다.
html: label 탭의 for 속성을 사용하여 라디오를 연결합니다

<div class="checkbox-1">
    <input type="checkbox" name="checkbox-1" id="checkbox-1-1" checked="checked">
    <label for="checkbox-1-1">label>

    <input type="checkbox" name="checkbox-1" id="checkbox-1-2">
    <label for="checkbox-1-2">label>

    <input type="checkbox" name="checkbox-1" id="checkbox-1-3">
    <label for="checkbox-1-3">label>
div>
<div class="checkbox-2">
    <input type="checkbox" name="checkbox-2" id="checkbox-2-1" checked="checked">
    <label for="checkbox-2-1">label>

    <input type="checkbox" name="checkbox-2" id="checkbox-2-2">
    <label for="checkbox-2-2">label>

    <input type="checkbox" name="checkbox-2" id="checkbox-2-3">
    <label for="checkbox-2-3">label>
div>

css

 
posted @
2018-02-01 23:10 백지천독서(
...) 설명(
...) 모음 편집