• 纯css写一个switch开关


    这样的简单的开关效果

    1、html

    <div class="switch-box">
        <div class="bg_con">
            <input id="checked_1" type="checkbox" class="switch"  value="0" />
            <label for="checked_1"></label>
        </div>
    </div>    

    2、css

    .switch-box{
        width:42px;
    }
     .switch-box .switch{
        display:none;
    }
     .switch-box label{
        position:relative;
        display: block;
        padding: 1px;
        border-radius: 24px;
        height: 22px;
        margin-bottom: 15px;
        background-color: #eee;
        cursor: pointer;
        vertical-align: top;
        -webkit-user-select: none;
    }
     .switch-box label:before{
        content: '';
        display: block;
        border-radius: 24px;
        height: 22px;
        background-color: white;
        -webkit-transform: scale(1, 1);
        -webkit-transition: all 0.3s ease;
    }
     .switch-box label:after{
        content: '';
        position: absolute;
        top: 50%;  
        left: 50%;  
        margin-top: -11px;  
        margin-left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 22px;
        background-color: white;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
        -webkit-transform: translateX(-9px);
        -webkit-transition: all 0.3s ease;
    }
     .switch-box .switch:checked~label:after{
        -webkit-transform: translateX(9px);
    }
     .switch-box .switch:checked~label:before{
        background-color:#de0b23;
    }
    与尘埃中开出花朵。
  • 相关阅读:
    投资数据来源
    白酒
    医药
    农林牧渔
    软件IT
    基建
    ajax验证用户名 当用户名框的数据改变时 执行ajax方法
    jQuery load() 方法
    js各种验证文本框输入格式
    JAVASCRIPT技术 表达式验证
  • 原文地址:https://www.cnblogs.com/congfeicong/p/7241565.html
Copyright © 2020-2023  润新知