每日CSS_仿蘋果平滑開關按鈕

隨遇丿而安發表於2020-12-24
CSS蘋果

每日CSS_仿蘋果平滑開關按鈕

2020_12_24

平滑按鈕

原始碼


1. 程式碼解析

1.1 html 程式碼解析

<div class="checkbox">
  <div class="inner" id="inner">
    <div class="toggle" id="toggle"></div>
  </div>
</div>

最外層 checkbox, 是按鈕的整體, inner 是ON下綠色框所佔的區域, toggle 是能點選的 ON 和 OFF 區域.


1.2 css 程式碼解析

  • 設定 body 字型和背景色
body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #dcdcdc;
}
  • 設定按鈕的背景色, 位置, 圓形邊框, 上下邊框顏色和厚度
.checkbox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(0deg, #d8d8d8, #cccccc);
  border-top: 0.02em solid #ececec;
  border-bottom: 0.02em solid #ececec;
}

  • 設定 綠色底色區域 的上下左右位置, 以此確定寬度和高度, 注意, 這裡沒設寬度和高度, 預設是 auto

    設定背景, 圓形邊框, 陰影

.checkbox .inner{
  position: absolute;
  /* 因為沒設寬和高, 所以可以這樣 */
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(0deg, #a5a5a5, #717171);
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}
  • 設定 ON OFF 按鈕大小, 位置, 顏色, 背景, 陰影, 頂部和底部邊框樣式, 設定按鈕上的動畫時間為 0.5s
.checkbox .inner .toggle{
  position: absolute;
  top: -3px;
  left: -3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(0deg, #ccc, #e4e4e4);
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
  box-sizing: border-box;
  border-top: 0.04em solid #ececec;
  border-bottom: 0.01em solid #ececec;
  transition: 0.5s;
}
  • 設定 OFF 的樣式,, 由上下左右的定位確定 寬和高, 設定背景, 圓形邊框, line-height 用來設定字型垂直居中
.checkbox .inner .toggle:before{
  content: "OFF";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: linear-gradient(0deg, #e4e4e4, #ccc);
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  line-height: 28px;
  color: #a9a9a9;
}
  • 設定 點選後按鈕的字型, ON, 之所有沒有寫其他屬性, 是因為其他屬性都繼承 checkbox .inner .toggle:before
.checkbox .inner.active .toggle:before{
  content: "ON";
  color: #00d22d;
}
  • 當按鈕被點選, 滑塊右移, 並且更改背景色, 更改時間為 0.5s
.checkbox .inner.active .toggle{
  left: 47px;
}
.checkbox .inner.active{
  background: linear-gradient(0deg, #00d22d, #158a00);
}

1.3 javascript 程式碼解析

<script>
  let inner = document.getElementById('inner');
  let toggle = inner.children[0];
  toggle.addEventListener('click', ()=>{
    if(inner.classList.contains('active')){
      inner.classList.remove('active');
    }else {
      inner.classList.add('active');
    }
  })
</script>
  1. 首先獲取到 inner 和 toggle, 一個背景色框, 一個圓形按鈕
  2. 給按鈕 toggle 註冊點選事件, 點選 ON OFF 按鈕才有效
  3. 當 inner 處於 active, 也就是 inner 元素包含 active 類, 那就移除, 如果不包含, 那就新增, 反正做一個相反的操作
  4. 當 inner 處於 active, toggle 會右移, inner 背景色會變換, 在 css中 設定
  5. 大功告成, 過程如下圖

active

active


2. 原始碼

2.1 html 原始碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="2020_12_24.css">
</head>
<body>
<div class="checkbox">
  <div class="inner" id="inner">
    <div class="toggle" id="toggle"></div>
  </div>
</div>
<script>
  let inner = document.getElementById('inner');
  let toggle = inner.children[0];
  toggle.addEventListener('click', ()=>{
    if(inner.classList.contains('active')){
      inner.classList.remove('active');
    }else {
      inner.classList.add('active');
    }
  })
</script>
</body>
</html>

2.2 css 原始碼

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #dcdcdc;
}
.checkbox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(0deg, #d8d8d8, #cccccc);
  border-top: 0.02em solid #ececec;
  border-bottom: 0.02em solid #ececec;
}
.checkbox .inner{
  position: absolute;
  /* 因為沒設寬和高, 所以可以這樣 */
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(0deg, #a5a5a5, #717171);
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}
.checkbox .inner .toggle{
  position: absolute;
  top: -3px;
  left: -3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(0deg, #ccc, #e4e4e4);
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
  box-sizing: border-box;
  border-top: 0.04em solid #ececec;
  border-bottom: 0.01em solid #ececec;
  transition: 0.5s;
}
.checkbox .inner .toggle:before{
  content: "OFF";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: linear-gradient(0deg, #e4e4e4, #ccc);
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  line-height: 28px;
  color: #a9a9a9;
}
.checkbox .inner.active .toggle:before{
  content: "ON";
  color: #00d22d;
}
.checkbox .inner.active .toggle{
  left: 47px;
}
.checkbox .inner.active{
  background: linear-gradient(0deg, #00d22d, #158a00);
}

相關文章