提姆寫程式

0%

CSS 筆記 - 寫一個 iPhone 開關效果

發表於 更新於 分類於 Disqus：
我指的是開關，不是任天堂的 Switch

image alt

再研究 checkbox 屬性，看到此篇覺得非常實用，就拿來當作筆記，未來有機會就可以不用再重新查找，透過純 CSS 來寫一個開關，很純，沒有 JavaScript。

HTML 架構

1
2
3
4
5
6
7
8
9
<div class="switch">
  <label>
    <input type="checkbox" class="checkbox" />
    <span class="btn_box">
      <span class="btn"></span>
    </span>
    <span class="text">OFF / ON</span>
  </label>
</div>

input 是用 checkbox 的類別，因為通常開關會很多，且獨立可個別點擊。

CSS 樣式

再看一下 CSS layout，其中因為要做成膠囊式的 input，建議使用像素，不要用百分比，只要像素條得夠大，都會是膠囊式的呈現。

.btn_box 使用 display:inline-block 為了可以讓該元素與文字可以做對齊而使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.btn_box {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 100px; //膠囊式圓角不要用百分比
  background-color: #cccccc;
  box-shadow: 0px 3px 2px rgba($color: #000000, $alpha: 0.2) inset; //按鈕框內部加上陰影
  vertical-align: middle; //因為 `display:inline-block` 的特性，可以使用此語法。
  margin-right: 10px;
  .btn {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-left: 0;
    transition: all 0.5s; //為了讓按鈕有漸變移動的效果
    box-shadow: 1px 2px 5px rgba($color: #000000, $alpha: 0.3);
  }
}

完成後，之後會得到一個靜態無法使用的開關了，目前已經完成一半，接下來要給開關來點動畫效果。

動畫效果

善用 transition 可以完成好多動畫效果，這個語法真的超級好用，因為外層已經有包覆 label，所以點選文字也可以有觸動 checkbox 的效果，但視覺上是用讓開關能夠使用，要把 checkbox 隱藏。

1
2
3
4
5
6
7
8
9
10
11
12
.checkbox {
  position: absolute; //絕對定位沒有特別寫位置，元素不會亂跑，會留在原位。
  opacity: 0; //隱藏 checkbox
  // input[type='checkbox']
  &:checked + .btn_box {
    //選取到下一個元素
    background-color: #5ee45e;
    .btn {
      margin-left: 20px;
    }
  }
}

隱藏 checkbox

  • 直接使用絕對定位來做，絕對定位沒有特別寫位置，元素不會亂跑，會留在原位。把 opacity 改成 1，就會看到了。

  • 再寫上當使用 :checked 效果時 .btn_box 會改變顏色，並且 .btn 會往左推 20px。

這樣就完成了！真的很有意思!

參考資料