之前一个项目设计一个功能，通过一个开关控制轮播图是否轮播。
现在抽空自己参照elementul仿了一个。
效果如下：
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>switch</title> <style> .mui-switch { width: 50px; height: 30px; position: relative; background-color: red; border-radius: 20px; appearance: none; } .mui-switch::before { content: ""; width: 29px; height: 28px; position: absolute; top: 1px; left: 0; border-radius: 20px; background-color: white; } .mui-switch:checked::before { left: 21px; } .mui-switch.mui-switch-animbg:before { transition: left 0.3s; } .mui-switch.mui-switch-animbg:checked { background-color: green; } </style> </head> <body> <label for=""> <input type="checkbox" class="mui-switch mui-switch-animbg" /> </label> </body></html>
