css实现全屏拉伸checkbox开关切换动画效果代码-html代码-BFW代码库

css实现全屏拉伸checkbox开关切换动画效果代码

代码语言：html

代码描述：css实现全屏拉伸checkbox开关切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">



    <style>
        * {
                border: 0;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
        }
        :root {
                --hue: 223;
                --bg: hsl(var(--hue),10%,90%);
                --fg: hsl(var(--hue),10%,10%);
                --primary: hsl(var(--hue),90%,55%);
                --trans-dur: 1s;
                font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
        }
        body,
        input {
                font: 1em/1.5 sans-serif;
        }
        body {
                background-color: var(--bg);
                color: var(--fg);
                height: 100vh;
                display: grid;
                overflow-x: hidden;
                place-items: center;
                transition:
                        background-color var(--trans-dur),
                        color var(--trans-dur);
        }
        
        .toggle {
                font-size: 2em;
                position: relative;
        }
        .toggle__input {
                box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,75%,0);
                border-radius: 0.75em;
                display: block;
                position: relative;
                width: 3em;
                height: 1.5em;
                -webkit-appearance: none;
                appearance: none;
                -webkit-tap-highlight-color: transparent;
        }
        .toggle__input:focus {
                box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,75%,1);
                outline: transparent;
        }
        .toggle__input:before,
        .toggle__input:after {
                background-color: hsl(0,0%,100%);
                border-radius: 50%;
                content: "";
                display: block;
                position: absolute;
                top: 0.25em;
                width: 1em;
                height: 1em;
                z-index: 1;
        }
        .toggle__input:before {
                animation: handleOffA var(--trans-dur);
                left: 0.25em;
        }
        .toggle__input:after {
                animation: handleOffB var(--trans-dur);
                right: 0.25em;
                transform: translateX(50vw);
        }
        .toggle__input:checked:before {
                animation: handleOnA var(--trans-dur);
                transform: translateX(-50vw);
        }
        .toggle__input:checked:after {
                animation: handleOnB var(--trans-dur);
                transform: translateX(0);
        }
        .toggle__stretch-left,
        .toggle__stretch-right {
                pointer-events: none;
                overflow: hidden;
                position: absolute;
                top: 0;
                width: 50vw;
                height: 100%;
        }
        .toggle__stretch-left {
                right: 50%;
        }
        .toggle__stretch-right {
                left: 50%;
        }
        .toggle__input,
        .toggle__stretch-left:before,
        .toggle__stretch-right:before {
                background-color: hsl(var(--hue),10%,80%);
                transition:
                        background-color calc(var(--trans-dur) * 0.2) calc(var(--trans-dur) * 0.4) ease-in.........完整代码请登录后点击上方下载按钮下载查看