【无标题】

最新推荐文章于 2024-07-08 16:22:29 发布

莉莉安oi

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量47

点赞数

文章标签： javascript css3 开发语言

本文链接：https://blog.csdn.net/weixin_43745973/article/details/132272428

版权

checkbox改el-switch

  <input class="switch" type="checkbox" checked="checked" style="cursor: pointer" />

 .switch {
                      appearance: none;
                      -moz-appearance: button;
                      -webkit-appearance: none;
                    }

                    .switch {
                      position: relative;
                      margin: 0;
                      width: 40PX;
                      height: 20PX;
                      border: 1PX solid #EBEBF9;
                      outline: 0;
                      border-radius: 10PX;
                      box-sizing: border-box;
                      background-color: #EBEBF9;
                      -webkit-transition: background-color 0.1s, border 0.1s;
                      transition: background-color 0.1s, border 0.1s;
                    }

                    .switch:before {
                      content: " ";
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 40PX;
                      height: 20PX;
                      border-radius: 10PX;
                      background-color: #EBEBF9;
                      -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
                      transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
                      transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
                    }

                    .switch:after {
                      content: " ";
                      position: absolute;
                      top: 0;
                      left: 1px;
                      width: 18PX;
                      height: 18PX;
                      border-radius: 15PX;
                      background-color: #FFFFFF;
                      /*box-shadow: 0 1PX 3PX rgba(0, 0, 0, 0.4);*/
                      -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
                      transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
                      transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
                    }

                    .switch:checked {
                      background: #409eff;
                      border: solid 1px #409eff;
                    }

                    .switch:checked:before {
                      transform: scale(0);
                    }

                    .switch:checked:after {
                      transform: translateX(19PX);
                    }