纯CSS打造可爱的Switch开关

267

前置知识:

Label的使用方式:

image.png

var函数::root{
    --background-color: red;
    // 函数名: 函数值
}
    .background {
        background-color: var(--background-color);
    }


  伪元素:用于设置元素指定部分的样式。使用双冒号
       eg: .background::after {
           ...
       }
       
 @keyframes动画:通过 @keyframes 规则,您能够创建动画。

    创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

    在动画过程中,您能够多次改变这套 CSS 样式。

    以百分比来规定改变发生的时间,或者通过关键词 "from""to",等价于 0%100%0% 是动画的开始时间,100% 动画的结束时间。

    为了获得最佳的浏览器支持,您应该始终定义 0%100% 选择器。

    注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

    ## 语法

    ```
    @keyframes animationname {keyframes-selector {css-styles;}}
    ```

    | 值                    | 描述                                                             |
    | -------------------- | ---------------------------------------------------------------  |
    | *animationname*      | 必需。定义动画的名称。                                             |
    | *keyframes-selector* | 必需。动画时长的百分比。合法的值:   0-100% ---   from(与 0% 相同-   to(与 100% 相同) |
    | *css-styles*         | 必需。一个或多个合法的 CSS 样式属性。     
   
   

原理:利用check复选框,然后把复选框隐藏,使用label+span绘制

html部分:

           <!-- 需要一个checkbox复选框,后面用css隐藏了 -->
           <input type="checkbox" name="" id="toggle" class="toggle-box">
            <!-- label用来制作外边的边框 -->
            <label for="toggle" class="toggle-label">
                <!-- span用来制作小球 -->
                <span class="toggle-ball"></span>
            </label>
            <!-- 背景颜色 -->
            <div class="background"></div>

image.png

出现了一个简单的复选框,接下来就开始写css部分

   /* 设置了一堆var函数 */
   :root {
        --bule-background: #C2E9F6;
        --bule-border: #72cce3;
        --bule-color: #96dcee;
        --yellow-background: #fffaa8;
        --yellow-border: #f5eb71;

        --indigo-background: #808fc7;
        --indigo-border: #5d6baa;
        --indigo-color: #6b7abb;
        --gray-border: #e8e8ea;
        --gray-dots: #e8e8ea;

        --white: #fff;
    }
    
    /* 先去掉边距,再给Input隐藏了 */
    * {
        margin: 0;
        padding: 0;
    }

    .toggle-box {
        display: none;
    }
    
    /* 设置边框 */
    .toggle-label {
        display: block;
        /* 相对定位,为了子绝父相 */
        position: relative;
        width: 200px;
        height: 100px;
        margin: 250px auto;
        border: 5px solid var(--bule-border);
        background: var(--bule-color);
        border-radius: 100px;
    }
    
    

image.png

一个大概的框就成型了,接下来画一个小球

    /* 设置小球 */
    .toggle-ball {
        width: 82px;
        height: 82px;
        border: 5px solid var(--yellow-border);
        position: absolute;
        top: 4px;
        left: 4px;
        background: var(--yellow-background);
        border-radius: 82px;
        animation: reverse1 350ms forwards;
    }
    
    /* 制作两条横线,利用到了上面介绍的伪元素 */
    .toggle-label::before {
        content: "";
        position: absolute;
        top: 35px;
        left: 130px;
        width: 40px;
        height: 5px;
        background: var(--white);
        border-radius: 5px;
        transition: 150ms;
    }

    .toggle-label::after {
        content: "";
        position: absolute;
        top: 60px;
        left: 115px;
        width: 40px;
        height: 5px;
        background: var(--white);
        border-radius: 5px;
        transition: 150ms;
    }
    
    /* 简单加个背景色(用不到可以不加) */
    .background {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: var(--bule-background);
        z-index: -1;
    }
    
    /* label点击之后 */
    .toggle-box:checked+.toggle-label>.toggle-ball {
        background: var(--white);
        border-color: var(--gray-border);
        /* 点击之后移动小球的动画 */
        animation: switch 350ms forwards;
    }

    /* 给小球加上俩点,默认不显示 */
    .toggle-ball::before {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        left: 20px;
        top: 15px;
        border-radius: 50%;
        background: var(--gray-border);
        opacity: 0;
    }


    .toggle-ball::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        left: 10px;
        top: 35px;
        border-radius: 50%;
        background: var(--gray-border);
        opacity: 0;
    }

    /* 点击之后,小球显示俩点 */
    .toggle-box:checked+.toggle-label>.toggle-ball::before {
        opacity: 1;
    }

    .toggle-box:checked+.toggle-label>.toggle-ball::after {
        opacity: 1;
    }
    
    /* 点击之后,背景颜色发生变化 */
    .toggle-box:checked~.background {
        background: var(--indigo-background);
    }

    /* 点击之后,label里面的颜色也要变化 */
    .toggle-box:checked+.toggle-label {
        background: var(--indigo-background);
        border-radius: 80px;
    }
    
    /* 动画效果 */
    @keyframes switch {
        0% {
            left: 4px;
        }
        60% {
            left: 4px;
            width: 112px;
        }
        100% {
            left: 104px;
            width: 82px;
        }
    }

    @keyframes reverse1 {
        0% {
            left: 104px;
            width: 82px;
        }
        60% {
            left: 72px;
            width: 112px;
        }
        100% {
            left: 4px;
            width: 82px;
        }
    }

    /* 横线发生变化 */
    .toggle-box:checked+.toggle-label::before {
        width: 6px;
        height: 6px;
        top: 32px;
        left: 40px;
    }

    .toggle-box:checked+.toggle-label::after {
        width: 8px;
        height: 8px;
        top: 60px;
        left: 55px;
    }

关键指示:@keyframes动画加上过渡

全部代码: