CSS3를 사용하여 iOS의 스위치가 있는 체크박스 및 버튼과 유사한 코드 작성

이 글에서는 CSS3를 사용하여 iOS와 유사한 스위치가 있는 체크박스와 버튼을 작성하는 방법을 주로 소개합니다. 도움이 필요한 친구들은

체크박스 다중 선택

최근에 모바일 단말에 적합한 체크박스를 작성했습니다. 사진에 표시됨:

ps: 중간에 있는 고리는 아이콘 글꼴, iOS 스타일입니다.

특정 HTML:

<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox">默认未选中</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" checked>默认选中</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" disabled>禁用</label>
</p>

CSS 코드(SCSS에서 내보내기, 레이아웃이 좀 이상함):

.mui-checkbox {   
  -webkit-appearance: none;   
  position: relative;   
  width: 25px;   
  height: 25px;   
  margin-right: 10px;   
  background-color: #FFFFFF;   
  border: solid 1px #d9d9d9;   
  border-top-left-radius: 20px;   
  border-top-rightright-radius: 20px;   
  border-bottom-left-radius: 20px;   
  border-bottom-rightright-radius: 20px;   
  background-clip: padding-box;   
  display: inline-block; }   
  .mui-checkbox:focus {   
    outline: 0 none;   
    outline-offset: -2px; }   
  .mui-checkbox:checked {   
    background-color: #18b4ed;   
    border: solid 1px #FFFFFF; }   
    .mui-checkbox:checked:before {   
      display: inline-block;   
      margin-top: 1px;   
      margin-left: 2px;   
      font-family: iconfont;   
      content: "\e667";   
      color: #FFFFFF;   
      font-size: 18px; }   
  .mui-checkbox:disabled {   
    background-color: #d9d9d9;   
    border: solid 1px #d9d9d9; }   
    .mui-checkbox:disabled:before {   
      display: inline-block;   
      margin-top: 1px;   
      margin-left: 2px;   
      font-family: iconfont;   
      content: "\e667";   
      color: #FFFFFF;   
      font-size: 18px; }   
  .mui-checkbox.checkbox-green:checked {   
    background-color: #5cb85c; }   
  .mui-checkbox.checkbox-orange:checked {   
    background-color: #f0ad4e; }   
  .mui-checkbox.checkbox-s {   
    width: 19px;   
    height: 19px; }   
    .mui-checkbox.checkbox-s:before {   
      display: inline-block;   
      margin-top: 1px;   
      margin-left: 2px;   
      font-family: iconfont;   
      content: "\e667";   
      color: #FFFFFF;   
      font-size: 13px; }   
.mui-checkbox-anim {   
  -webkit-transition: background-color ease 0.2s;   
          transition: background-color ease 0.2s; }

SCSS 코드:

@mixin checkedCon($fs:18px) {   
  &:before {   
    display: inline-block;   
    margin-top: 1px;   
    margin-left: 2px;   
    font-family: iconfont;   
    content: "\e667";   
    color: #FFFFFF;   
    font-size: $fs;   
  }   
}   
$duration: .4s;   
.mui-checkbox {   
  -webkit-appearance: none;   
  position: relative;   
  width: 25px;   
  height: 25px;   
  margin-right: 10px;   
  background-color: #FFFFFF;   
  border: solid 1px #d9d9d9;   
  border-top-left-radius: 20px;   
  border-top-rightright-radius: 20px;   
  border-bottom-left-radius: 20px;   
  border-bottom-rightright-radius: 20px;   
  background-clip: padding-box;   
  display: inline-block;   
  &:focus {   
    outline: 0 none;   
    outline-offset: -2px
  }   
  &:checked {   
    background-color: #18b4ed;   
    border: solid 1px #FFFFFF;   
    @include checkedCon();   
  }   
  &:disabled {   
    background-color: #d9d9d9;   
    border: solid 1px #d9d9d9;   
    @include checkedCon();   
  }   
  &.checkbox-green:checked {   
    background-color: #5cb85c;   
  }   
  &.checkbox-orange:checked {   
    background-color: #f0ad4e;   
  }   
  &.checkbox-s {   
    width: 19px;   
    height: 19px;   
    @include checkedCon(13px);   
  }   
}   
.mui-checkbox-anim{   
  //border等其他元素不做过渡效果，增加视觉差，更有动画效果   
  transition: background-color ease $duration/2;   
}

With 스위치 스위치
이 UI를 만드는 목적은 모바일 페이지를 지원하는 것입니다. Webkit은 가상 클래스(:before 또는 :after)를 사용하여 단일 태그 입력 요소도 지원하므로 더 많은 지원과 최적화를 수행하지 않았습니다. 단지 HTML을 최대한 깔끔하게 유지하고 싶었기 때문입니다. 시뮬레이션을 위해 다른 요소를 사용합니다. 데스크톱 애플리케이션에서 사용하거나 다른 브라우저를 지원하려면 직접 약간 수정하면 됩니다. 어쨌든 테스트하지는 않았습니다.

오늘 저는 그림과 같이 매우 흔해 보이는 iOS 스타일 스위치 버튼을 계속 공유합니다.

구현을 시뮬레이션하기 위해 주로 2213c9627c391f00ef101b1592023bcb

<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim   
类即可</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>

실제 사용에서는 나중에 두 가지 전환 효과가 더 추가되었습니다. 각각 mui-switch-animbg 및 mui-switch-anim 클래스를 추가하면 구체적인 효과를 확인할 수 있습니다.

CSS 코드(SCSS에서 내보낸 것인데 레이아웃이 좀 이상함):

.mui-switch {   
  width: 52px;   
  height: 31px;   
  position: relative;   
  border: 1px solid #dfdfdf;   
  background-color: #fdfdfd;   
  box-shadow: #dfdfdf 0 0 0 0 inset;   
  border-radius: 20px;   
  border-top-left-radius: 20px;   
  border-top-rightright-radius: 20px;   
  border-bottom-left-radius: 20px;   
  border-bottom-rightright-radius: 20px;   
  background-clip: content-box;   
  display: inline-block;   
  -webkit-appearance: none;   
  user-select: none;   
  outline: none; }   
  .mui-switch:before {   
    content: '';   
    width: 29px;   
    height: 29px;   
    position: absolute;   
    top: 0px;   
    left: 0;   
    border-radius: 20px;   
    border-top-left-radius: 20px;   
    border-top-rightright-radius: 20px;   
    border-bottom-left-radius: 20px;   
    border-bottom-rightright-radius: 20px;   
    background-color: #fff;   
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }   
  .mui-switch:checked {   
    border-color: #64bd63;   
    box-shadow: #64bd63 0 0 0 16px inset;   
    background-color: #64bd63; }   
    .mui-switch:checked:before {   
      left: 21px; }   
  .mui-switch.mui-switch-animbg {   
    transition: background-color ease 0.4s; }   
    .mui-switch.mui-switch-animbg:before {   
      transition: left 0.3s; }   
    .mui-switch.mui-switch-animbg:checked {   
      box-shadow: #dfdfdf 0 0 0 0 inset;   
      background-color: #64bd63;   
      transition: border-color 0.4s, background-color ease 0.4s; }   
      .mui-switch.mui-switch-animbg:checked:before {   
        transition: left 0.3s; }   
  .mui-switch.mui-switch-anim {   
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }   
    .mui-switch.mui-switch-anim:before {   
      transition: left 0.3s; }   
    .mui-switch.mui-switch-anim:checked {   
      box-shadow: #64bd63 0 0 0 16px inset;   
      background-color: #64bd63;   
      transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }   
      .mui-switch.mui-switch-anim:checked:before {   
        transition: left 0.3s; }   
/*# sourceMappingURL=mui-switch.css.map */

SCSS 코드:

@mixin borderRadius($radius:20px) {   
  border-radius: $radius;   
  border-top-left-radius: $radius;   
  border-top-rightright-radius: $radius;   
  border-bottom-left-radius: $radius;   
  border-bottom-rightright-radius: $radius;   
}   
$duration: .4s;   
$checkedColor: #64bd63;   
.mui-switch {   
  width: 52px;   
  height: 31px;   
  position: relative;   
  border: 1px solid #dfdfdf;   
  background-color: #fdfdfd;   
  box-shadow: #dfdfdf 0 0 0 0 inset;   
  @include borderRadius();   
  background-clip: content-box;   
  display: inline-block;   
  -webkit-appearance: none;   
  user-select: none;   
  outline: none;   
  &:before {   
    content: '';   
    width: 29px;   
    height: 29px;   
    position: absolute;   
    top: 0px;   
    left: 0;   
    @include borderRadius();   
    background-color: #fff;   
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);   
  }   
  &:checked {   
    border-color: $checkedColor;   
    box-shadow: $checkedColor 0 0 0 16px inset;   
    background-color: $checkedColor;   
    &:before {   
      left: 21px;   
    }   
  }   
  &.mui-switch-animbg {   
    transition: background-color ease $duration;   
    &:before {   
      transition: left 0.3s;   
    }   
    &:checked {   
      box-shadow: #dfdfdf 0 0 0 0 inset;   
      background-color: $checkedColor;   
      transition: border-color $duration, background-color ease $duration;   
      &:before {   
        transition: left 0.3s;   
      }   
    }   
  }   
  &.mui-switch-anim {   
    transition: border cubic-bezier(0, 0, 0, 1) $duration, box-shadow cubic-bezier(0, 0, 0, 1) $duration;   
    &:before {   
      transition: left 0.3s;   
    }   
    &:checked {   
      box-shadow: $checkedColor 0 0 0 16px inset;   
      background-color: $checkedColor;   
      transition: border ease $duration, box-shadow ease $duration, background-color ease $duration*3;   
      &:before {   
        transition: left 0.3s;   
      }   
    }   
  }   
}

위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요!

관련 권장사항: 줄임표로 대체된 CSS3 코드 변환 시 스케일 스케일링 분석

위 내용은 CSS3를 사용하여 iOS의 스위치가 있는 체크박스 및 버튼과 유사한 코드 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!