css实现可配置radio滑块单选效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现可配置radio滑块单选效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('//repo.bfw.wiki/bfwrepo/css/open-props.normalize.light.min.css') layer(normalize); @layer normalize, base, demo, flip, debug; @layer debug { [data-debug='true'] input.sr-only { position: absolute; width: 20px; height: 20px; padding: 0; margin: unset; overflow: visible; clip: unset; white-space: nowrap; border-width: unset; accent-color: red; outline: none; cursor: pointer; -webkit-animation: reveal calc(var(--duration) * 1s) ease-out; animation: reveal calc(var(--duration) * 1s) ease-out; } @-webkit-keyframes reveal { 0% { opacity: 0; } } @keyframes reveal { 0% { opacity: 0; } } [data-debug='true'] .control__track > input { left: 25%; bottom: 200%; translate: -50% 0; } [data-debug='true'] .premium > input:nth-of-type(1) { left: 25%; bottom: calc(200% + 2px); translate: -50% 0; } [data-debug='true'] .premium > input:nth-of-type(2) { left: 75%; bottom: calc(200% + 2px); translate: -50% 0; } } @layer flip { :root { --shadow-color: 0deg 0% 63%; --primary: light-dark(hsl(0 0% 10%), #fff); --secondary: canvas; --inactive: light-dark(hsl(0 0% 60%), hsl(0 0% 50%)); --duration: 0.2; --drop-off: 0.4; --ease: ease-out; --border: light-dark(hsl(0 0% 80%), hsl(0 0% 60%)); @media (prefers-color-scheme: dark) { --shadow-color: 0deg 0% 0%; } } [data-theme='dark'] { --shadow-color: 0deg 0% 0%; } [data-theme='light'] { --shadow-color: 0deg 0% 63%; } .premium:has(:checked)::before { translate: -50% -250%; scale: 0.85; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0