原文地址：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'); }); });