前端每日實戰5.用 CSS 創作一個立體滑動 toggle 互動控制元件
阿新 • • 發佈：2018-12-11
原文地址：https://segmentfault.com/a/1190000014638655
HTML程式碼：
<html> <head> <link rel="stylesheet" href="index.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div class="checkbox"> <div class="inner"> <div class="toggle"></div> </div> </div> <script src="index.pack.js"></script> </body> </html>
CSS程式碼：
/* */ /* 居中顯示： */ html, body, .checkbox, .checkbox .inner, .checkbox .inner .toggle{ margin: 0; padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; } /* 畫出外側橢圓： */ .checkbox { width: 10em; height: 5em; background: linear-gradient(silver, whitesmoke); border-radius: 2.5em; font-size: 30px; } /* 畫出內側橢圓*/ .checkbox .inner { width: 8em; height: 3.5em; background: linear-gradient(dimgray, silver); border-radius: 2em; box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.5); } /* 畫出圓形按鈕： */ .checkbox .inner .toggle { width: 3.5em; height: 3.5em; background: linear-gradient(to top, silver, whitesmoke); border-radius: 50%; box-shadow: 0 0.4em 0.6em rgba(0, 0, 0, 0.2); position: relative; left: -30%; } /* 為圓形按鈕增加立體效果： */ .checkbox .inner .toggle::before { content: 'OFF'; position: absolute; width: 80%; height: 80%; background: linear-gradient(silver, whitesmoke); border-radius: 50%; text-align: center; line-height: calc(3.5em * 0.8); font-family: sans-serif; color: gray; } /* 設定 active 時控制元件的樣式: */ .checkbox .inner.active { background: linear-gradient(green, limegreen); } .checkbox .inner.active .toggle { left: 30%; } .checkbox .inner.active .toggle::before { content: 'ON'; color: limegreen; }
JS程式碼：
$(document).ready(function() { $('.toggle').click(function() { $('.inner').toggleClass('active'); }); });