创意鸡蛋加叉子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 + d.........完整代码请登录后点击上方下载按钮下载查看