아름다운 순수 CSS3 슬라이딩 스위치 버튼 세트

간단한 튜토리얼

CSS3를 사용하여 만든 절묘한 슬라이딩 스위치 버튼 효과 세트입니다. 이 슬라이딩 버튼 세트는 Bootstrap의 시나리오 클래스에 따라 설계되었으며 5가지 시나리오와 사용할 수 없는 상태에 적응할 수 있습니다.

HTML 구조 사용 방법

슬라이딩 버튼 효과의 기본 HTML 구조는 요소와 두 개의 < ; 라벨> 요소.

<div class="switch-box">
  <input id="default" class="switch-box-input" type="checkbox" />
  <label for="default" class="switch-box-slider"></label>
  <label for="default" class="switch-box-label">Default</label>
</div>

CSS 스타일

첫 번째 요소.switch-box-slider는 슬라이딩 버튼의 슬라이딩 축을 만드는 데 사용됩니다.

.switch-box .switch-box-slider {
  position: relative;
  display: inline-block;
  height: 8px;
  width: 32px;
  background: #d5d5d5;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.switch-box-slider 요소의 ::after 의사 요소는 원형 슬라이더를 만드는 데 사용됩니다.

.switch-box .switch-box-slider:after {
  position: absolute;
  left: -8px;
  top: -8px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  content: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.switch-box-input 요소가 체크된 상태이면 .switch-box-slider의 :after 의사 요소의 왼쪽 속성이 수정되고 원형 슬라이더가 이동됩니다.

.switch-box .switch-box-input ~ .switch-box-label {
  margin-left: 8px;
}
.switch-box .switch-box-input:checked ~ .switch-box-slider:after {
  left: 16px;
}

위 내용은 절묘한 순수 CSS3 슬라이딩 스위치 버튼 세트의 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!