publish: false

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     label {
  12.         display: block;
  13.         vertical-align: middle;
  14.     }
  16.     label,
  17.     input,
  18.     select {
  19.         vertical-align: middle;
  20.     }
  22.     .mui-switch {
  23.         width: 52px;
  24.         height: 31px;
  25.         position: relative;
  26.         border: 1px solid #dfdfdf;
  27.         background-color: #fdfdfd;
  28.         box-shadow: #dfdfdf 0 0 0 0 inset;
  29.         border-radius: 20px;
  30.         border-top-left-radius: 20px;
  31.         border-top-right-radius: 20px;
  32.         border-bottom-left-radius: 20px;
  33.         border-bottom-right-radius: 20px;
  34.         background-clip: content-box;
  35.         display: inline-block;
  36.         -webkit-appearance: none;
  37.         user-select: none;
  38.         outline: none;
  39.     }
  41.     .mui-switch:before {
  42.         content: '';
  43.         width: 29px;
  44.         height: 29px;
  45.         position: absolute;
  46.         top: 0px;
  47.         left: 0;
  48.         border-radius: 20px;
  49.         border-top-left-radius: 20px;
  50.         border-top-right-radius: 20px;
  51.         border-bottom-left-radius: 20px;
  52.         border-bottom-right-radius: 20px;
  53.         background-color: #fff;
  54.         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  55.     }
  57.     .mui-switch:checked {
  58.         border-color: #64bd63;
  59.         box-shadow: #64bd63 0 0 0 16px inset;
  60.         background-color: #64bd63;
  61.     }
  63.     .mui-switch:checked:before {
  64.         left: 21px;
  65.     }
  67.     .mui-switch.mui-switch-animbg {
  68.         transition: background-color ease 0.4s;
  69.     }
  71.     .mui-switch.mui-switch-animbg:before {
  72.         transition: left 0.3s;
  73.     }
  75.     .mui-switch.mui-switch-animbg:checked {
  76.         box-shadow: #dfdfdf 0 0 0 0 inset;
  77.         background-color: #64bd63;
  78.         transition: border-color 0.4s, background-color ease 0.4s;
  79.     }
  81.     .mui-switch.mui-switch-animbg:checked:before {
  82.         transition: left 0.3s;
  83.     }
  85.     .mui-switch.mui-switch-anim {
  86.         transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
  87.     }
  89.     .mui-switch.mui-switch-anim:before {
  90.         transition: left 0.3s;
  91.     }
  93.     .mui-switch.mui-switch-anim:checked {
  94.         box-shadow: #64bd63 0 0 0 16px inset;
  95.         background-color: #64bd63;
  96.         transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
  97.     }
  99.     .mui-switch.mui-switch-anim:checked:before {
  100.         transition: left 0.3s;
  101.     }
  103.     /*# sourceMappingURL=mui-switch.css.map */
  104. </style>
  106. <body>
  107.     <label>
  108.         <input class="mui-switch" type="checkbox"> 默认未选中</label>
  109.     <label>
  110.         <input class="mui-switch" type="checkbox" checked> 默认选中</label>
  111.     <label>
  112.         <input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
  113.     <label>
  114.         <input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
  115.     <label>
  116.         <input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim 类即可
  117.     </label>
  118.     <label>
  119.         <input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
  120. </body>
  122. </html>