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;   
}

スイッチ付き
この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>

実際の使用では、さらに 2 つのトランジション エフェクトが後で追加されました。それぞれ 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 中国語 Web サイトに注意してください。

関連する推奨事項: CSS3 の変換におけるスケール スケーリングの分析 省略記号で置き換えられたコード

以上がCSS3 を使用して、iOS のチェック ボックスやスイッチ付きボタンに似たコードを作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。