CSS仿蘋果平滑開關(guān)按鈕效果

1. 代碼解析
1.1 html 代碼解析
<div class="checkbox"> <div class="inner" id="inner"> <div class="toggle" id="toggle"></div> </div> </div>
最外層 checkbox, 是按鈕的整體, inner 是ON下綠色框所占的區(qū)域, toggle 是能點擊的 ON 和 OFF 區(qū)域.
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; }
設置 綠色底色區(qū)域 的上下左右位置, 以此確定寬度和高度, 注意, 這里沒設寬度和高度, 默認是 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>
- 首先獲取到 inner 和 toggle, 一個背景色框, 一個圓形按鈕
- 給按鈕 toggle 注冊點擊事件, 點擊 ON OFF 按鈕才有效
- 當 inner 處于 active, 也就是 inner 元素包含 active 類, 那就移除, 如果不包含, 那就添加, 反正做一個相反的操作
- 當 inner 處于 active, toggle 會右移, inner 背景色會變換, 在 css中 設置
- 大功告成, 過程如下圖
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); }
到此這篇關(guān)于CSS仿蘋果平滑開關(guān)按鈕效果的文章就介紹到這了,更多相關(guān)css平滑開關(guān)按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了CSS+JS實現(xiàn)水滴漣漪動畫按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2020-08-26
- 這篇文章主要介紹了css實現(xiàn)抖音訂閱按鈕動畫效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-12
CSS實現(xiàn)放大縮小關(guān)閉按鈕(實例代碼)
這篇文章主要介紹了CSS實現(xiàn)放大縮小關(guān)閉按鈕的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-20- 這篇文章主要介紹了CSS實現(xiàn)粒子動態(tài)按鈕效果,本文通過實例代碼給大家介紹的非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-08
使用 CSS 輕松實現(xiàn)一些高頻出現(xiàn)的奇形怪狀按鈕
本文基于一些高頻出現(xiàn)在設計稿中的,使用 CSS 實現(xiàn)稍微有點難度和技巧性的按鈕,講解使用 CSS 如何盡可能的實現(xiàn)它們,讓我們一起看看使用 CSS 輕松實現(xiàn)一些高頻出現(xiàn)的奇形2021-12-01