zoukankan      html  css  js  c++  java
  • 自定义switch开关

    自定义一个switch开关

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>theSwitch</title>
            <style>
                .label-switch {    
                }
                #checkBox {
                    display: none;
                }
                .checkBox {
                     52px;
                    height: 32px;
                    border-radius: 16px;
                    box-sizing: border-box;
                    background: #d8d8d8;
                    position: relative;
                }
                #checkBox:checked + .checkBox {
                    background: #00b4ff;
                }
                #checkBox:checked + .checkBox::before {
                    transform: translateX(22px);
                    transition-duration: 300ms;
                }
                .checkBox::before {                
                     28px;
                    height: 28px;
                    border-radius: 28px;
                    background: #ffffff;
                    position: absolute;
                    top: 2px;
                    left: 1px;
                    content: " ";
                    transform: scale(1);
                    box-sizing: border-box;
                    transform: translateX(0);
                    transition-duration: 300ms;
                }            
            </style>
        </head>
        <body>
            <label class="label-switch">
                <input type="checkbox" id="checkBox"/>
                <div class="checkBox" for="checkBox"></div>
            </label>
        </body>
    </html>
  • 相关阅读:
    python处理excel文件
    Python datetime模块
    OrderedDict 有序字典以及读取json串时如何保持原有顺序
    ansible 学习笔记
    nginx的location和rewrite
    实体机重装系统
    热词
    教育
    生活
    1、两数之和
  • 原文地址:https://www.cnblogs.com/yanze/p/5974531.html
Copyright © 2011-2022 走看看