编程知识 cdmana.com

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

# 每日CSS_仿蘋果平滑開關按鈕> 2020_12_24![平滑按鈕](http://cdn.xiaxiang.tech/image/blogs/html/CSS/每日CSS/2020_12_24/平滑按鈕.gif)原始碼
## 1. 程式碼解析### 1.1 html 程式碼解析```html
```最外層 checkbox, 是按鈕的整體, inner 是ON下綠色框所佔的區域, toggle 是能點選的 ON 和 OFF 區域.
### 1.2 css 程式碼解析- 設定 body 字型和背景色```cssbody{ margin: 0; padding: 0; font-family: sans-serif; background: #dcdcdc;}```- 設定按鈕的背景色, 位置, 圓形邊框, 上下邊框顏色和厚度```css.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* 設定背景, 圓形邊框, 陰影```css.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```css.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` 用來設定字型垂直居中```css.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````css.checkbox .inner.active .toggle:before{ content: "ON"; color: #00d22d;}```- 當按鈕被點選, 滑塊右移, 並且更改背景色, 更改時間為 0.5s```css.checkbox .inner.active .toggle{ left: 47px;}.checkbox .inner.active{ background: linear-gradient(0deg, #00d22d, #158a00);}```
### 1.3 javascript 程式碼解析```javascript```1. 首先獲取到 inner 和 toggle, 一個背景色框, 一個圓形按鈕2. 給按鈕 toggle 註冊點選事件, 點選 ON OFF 按鈕才有效3. 當 inner 處於 active, 也就是 inner 元素包含 active 類, 那就移除, 如果不包含, 那就新增, 反正做一個相反的操作4. 當 inner 處於 active, toggle 會右移, inner 背景色會變換, 在 css中 設定5. 大功告成, 過程如下圖![active](http://cdn.xiaxiang.tech/image/blogs/html/CSS/每日CSS/2020_12_24/無active.png)![active](http://cdn.xiaxiang.tech/image/blogs/html/CSS/每日CSS/2020_12_24/有active.png)
## 2. 原始碼### 2.1 html 原始碼```html
```### 2.2 css 原始碼```cssbody{ 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);}```

版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://www.itread01.com/content/1608862145.html

Scroll to Top