zoukankan      html  css  js  c++  java
  • 纯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;
    }
    与尘埃中开出花朵。
  • 相关阅读:
    EffectiveJava-4
    EffectiveJava-3
    EffectiveJava-2
    EffectiveJava-1
    jar包下载
    SpringBoot踩坑日记
    Spring全家桶——SpringBoot之AOP详解
    Spring全家桶——SpringBoot渐入佳境
    Spring全家桶一一SpringBoot与Mybatis
    SpringBoot2.x【一】从零开始环境搭建
  • 原文地址:https://www.cnblogs.com/congfeicong/p/7241565.html
Copyright © 2011-2022 走看看