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

代码语言：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;
        }
        .egg-switch input + div .egg .back:before, .egg-switch input + div .egg .back:after {
            --height: 14px;
            --background: var(--egg-back);
        }
        .egg-switch input + div .egg .back:before {
            --border-radius: 12px 12px 0 0;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
            clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
        }
        .egg-switch input + div .egg .back:after {
            --border-radius: 0 0 12px 12px;
            --top: 10px;
            -webkit-clip-path: polygon(0 0, 25% 20%, 50% 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 25% 20%, 50% 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);
        }
        .egg-switch input + div .flipper {
            position: absolute;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            top: 7px;
            left: 100%;
            opacity: 0;
            -webkit-transform-origin: 20px 50%;
            transform-origin: 20px 50%;
            -webkit-transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(0.8);
            transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(0.8);
            -webkit-animation: flipper 2s linear;
            animation: flipper 2s linear;
        }
        .egg-switch input + div .flipper:after {
            content: '';
            width: 20px;
            height: 6px;
            border-radius: 2px 1px 1px 2px;
            display: block;
            background: var(--flipper-hand);
            box-shadow: inset 0 -1px 0 0 var(--flipper-shadow);
        }
        .egg-switch input + div .flipper svg {
            width: 39px;
            height: 18px;
            display: block;
            color: var(--flipper);
        }
        .egg-switch input:checked + div .flipper {
            -webkit-animation: none;
            animation: none;
        }
        .egg-switch input:checked + div .egg {
            -webkit-animation: crack 2s linear forwards;
            animation: crack 2s linear forwards;
        }
        .egg-switch input:checked + div .egg .front:before {
            -webkit-animation: egg-white .8s linear forwards 1.4s;
            animation: egg-white .8s linear forwards 1.4s;
        }
        .egg-switch input:checked + div .egg .back:before, .egg-switch input:checked + div .egg .back:after {
            --animate-y: -16px;
            -webkit-transform: translateZ(-2px);
            transform: translateZ(-2px);
            -webkit-animation: egg-crack .8s linear forwards 1.4s;
            animation: egg-crack .8s linear forwards 1.4s;
        }
        .egg-switch input:checked + div .egg .back:after {
            --animate-y: 16px;
        }

@-webkit-keyframes egg {
            0%,
            40% {
                -webkit-transform: rotateY(180deg) translateX(-32px);
                transform: rotateY(180deg) translateX(-32px);
            }
            50% {
                -webkit-transform: rotateY(180deg) translateX(-33px);
                transform: rotateY(180deg) translateX(-33px);
            }
            75% {
                -webkit-transform: translateZ(32px);
                transform: translateZ(32px);
            }
            90% {
                -webkit-transform: scaleX(0.9);
                transform: scaleX(0.9);
            }
            100% {
                -webkit-transform: scaleX(0.8);
                transform: scaleX(0.8);
            }
        }

@keyframes egg {
            0%,
            40% {
                -webkit-transform: rotateY(180deg) translateX(-32px);
                transform: rotateY(180deg) translateX(-32px);
            }
            50% {
                -webkit-transform: rotateY(180deg) translateX(-33px);
                transform: rotateY(180deg) translateX(-33px);
            }
            75% {
                -webkit-transform: translateZ(32px);
                transform: translateZ(32px);
            }
            90% {
                -webkit-transform: scaleX(0.9);
                transform: scaleX(0.9);
            }
            100% {
                -webkit-transform: scaleX(0.8);
                transform: scaleX(0.8);
            }
        }
@-webkit-keyframes egg-white {
            0% {
                opacity: .4;
                -webkit-transform: scale(0.4);
                transform: scale(0.4);
            }
            60%,
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 1;
            }
        }
@keyframes egg-white {
            0% {
                opacity: .4;
                -webkit-transform: scale(0.4);
                transform: scale(0.4);
            }
            60%,
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 1;
            }
        }
@-webkit-keyframes egg-crack {
            0% {
                -webkit-transform: translateZ(-2px);
                transform: translateZ(-2px);
            }
            70% {
                -webkit-transform: translateZ(-2px) scale(0.8) rotate(4deg) translateY(var(--animate-y));
                transform: translateZ(-2px) scale(0.8) rotate(4deg) translateY(var(--animate-y));
            }
            80% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: translateZ(-2px) scale(0.8) rotate(8deg) translateY(calc(var(--animate-y) * 1.5));
                transform: translateZ(-2px) scale(0.8) rotate(8deg) translateY(calc(var(--animate-y) * 1.5));
            }
        }
@keyframes egg-crack {
            0% {
                -webkit-transform: translateZ(-2px);
                transform: translateZ(-2px);
            }
            70% {
                -webkit-transform: translateZ(-2px) scale(0.8) rotate(4deg) translateY(var(--.........完整代码请登录后点击上方下载按钮下载查看
创意鸡蛋加叉子checkbox效果

网友评论0

react图片表单卡片效果代码

css美化checkbox实现立体质感开关切换效果代码

css美化checkbox开关实现日夜切换代码

react实现可显示隐藏密码字符的输入框效果代码

div+css实现超简洁的登录表单页面代码

gsap+svg实现炫酷复古未来主义单选按钮点击动画效果代码

div+css实现全屏注册登录一体翻转表单页面代码

js+css实现分体式自聚焦验证码输入框代码

js+css实现可配置炫酷输入框placeholder扫光走光动画效果代码

js+css实现数字验证码分体式输入框代码
