创意鸡蛋加叉子checkbox效果-html代码-BFW代码库

创意鸡蛋加叉子checkbox效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        .egg-switch {
            --background: #171827;
            --shadow: rgba(246, 248, 255, .08);
            --shadow-inner: rgba(13, 15, 24, .8);
            --egg: #fff;
            --egg-back: #f4d2ad;
            --egg-yellow: linear-gradient(135deg, rgba(239,202,51, 1) 50%, rgba(237,139,2, 1) 100%);
            --egg-shadow: rgba(13, 15, 24, .25);
            --flipper: #F6F8FF;
            --flipper-hand: #8A91B4;
            --flipper-shadow: #646B8C;
            -webkit-perspective: 160px;
            perspective: 160px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .egg-switch input {
            display: none;
        }
        .egg-switch input + div {
            width: 64px;
            height: 32px;
            border-radius: 16px;
            position: relative;
            background: var(--background);
            box-shadow: inset 0 1px 3px 0 var(--shadow-inner), 0 1px 0 0 var(--shadow);
        }
        .egg-switch input + div .egg {
            position: absolute;
            left: 4px;
            top: 4px;
            z-index: 1;
            -webkit-animation: egg 2s linear forwards;
            animation: egg 2s linear forwards;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .egg-switch input + div .egg .front:before,
        .egg-switch input + div .egg .front:after,
        .egg-switch input + div .egg .back:before,
        .egg-switch input + div .egg .back:after {
            content: '';
        }
        .egg-switch input + div .egg .front:before,
        .egg-switch input + div .egg .front:after,
        .egg-switch input + div .egg .back:before,
        .egg-switch input + div .egg .back:after,
        .egg-switch input + div .egg .back {
            position: absolute;
            border-radius: var(--border-radius,50%);
            width: var(--width, var(--size,24px));
            height: var(--height, var(--size,24px));
            left: var(--left, var(--spacing,0));
            top: var(--top, var(--spacing,0));
            background: var(--background, var(--egg));
        }
        .egg-switch input + div .egg .front {
            width: 24px;
            height: 24px;
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .egg-switch input + div .egg .front:before {
            --background: var(--egg);
        }
        .egg-switch input + div .egg .front:after {
            --size: 12px;
            --spacing: 6px;
            --background: var(--egg-yellow);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 1px 1px 3px var(--egg-shadow);
        }
        .egg-switch input + div .egg .back {
            --background: none;
   .........完整代码请登录后点击上方下载按钮下载查看