只能选一次的checkbox
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .neumorphism-toggle { position: relative; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform: scale(var(--scale, 1)) translateZ(0); transform: scale(var(--scale, 1)) translateZ(0); } .neumorphism-toggle:active { --scale: .96; } .neumorphism-toggle input { display: none; } .neumorphism-toggle input + label { background: #fff; border-radius: 9px; padding: 16px 0 16px 20px; min-width: 208px; display: block; cursor: pointer; position: relative; box-shadow: -12px -12px 24px var(--light-shadow, transparent), 12px 12px 24px var(--shadow, transparent); -webkit-transition: box-shadow .4s; transition: box-shadow .4s; } .neumorphism-toggle input + label:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(160deg, #F1F4FF, #F9FAFF); opacity: var(--gradient, 0); -webkit-transition: opacity .4s; transition: opacity .4s; } .neumorphism-toggle input + label .switch { position: relative; display: inline-block; z-index: 1; vertical-align: top; height: 22px; width: 40px; border-radius: 11px; background: #ECEFFC; } .neumorphism-toggle input + label .switch:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; background: -webkit-gradient(linear, left top, right top, from(#4F97FF), to(#275EFE)); background: linear-gradient(90deg, #4F97FF, #275EFE); opacity: var(--gradient, 0); -webkit-transition: opacity .4s; transition: opacity .4s; } .neumorphism-toggle input + label .switch .dot { background: #D1D6EE; position: absolute; width: 24px; height: 24px; border-radius: 50%; left: -1px; top: -1px; -webkit-transform: translateX(var(--offset, 0)); transform: translateX(var(--offset, 0)); -webkit-transition: box-shadow .4s, -webkit-transform .4s; transition: box-shadow .4s, -webkit-transform .4s; transition: transform .4s, box-shadow .4s; transition: transform .4s, box-shadow .4s, -webkit-transform .4s; box-shadow: -4px -4px 8px var(--light-shadow-2, transparent), 4px 4px 8px var(--shadow, transparent); } .neumorphism-toggle input + label .switch .dot:before { content: ''; position: absolute; le.........完整代码请登录后点击上方下载按钮下载查看
网友评论0