创意鸡蛋加叉子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; } .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(--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0