css实现跳跃式radio单选框效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现跳跃式radio单选框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .container { --s: 1em; /* control the size */ --g: 10px; /* the gap */ --c: #009688; /* the active color */ display: grid; grid-auto-rows: 1fr; gap: var(--g); position: relative; } .container:before { content:""; position: absolute; height: calc(var(--s)/2); left: calc(var(--s)/4 + var(--_x,0px)); top: calc(var(--s)/4); background: var(--c); border-radius: 50%; aspect-ratio: 1; transition: .4s,left cubic-bezier(.1,-2000,.7,-2000) .4s; } label { display: inline-flex; line-height: var(--s); align-items: center; gap: 10px; cursor: pointer; } input { height: var(--s); aspect-ratio: 1; border: calc(var(--s)/8) solid var(--_c,#939393); border-radius: 50%; outline-offset: calc(var(--s)/10); padding: calc(var(--s)/8); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-size: inherit; margin: 0; transition: .3s; } input:checked { --_c: var(--c); } .container:not(:has(input:checked)):before { --_i: -1; opacity: 0; } .container:has(input:checked):before { opacity: 1; transform: translateY(calc(var(--_i)*(var(--s) + var(--g)))) } .container:has(label:nth-child(1) input:checked):before {--_i:0;--_x:.02px} .container:has(label:nth-child(2) input:checked):before {--_i:1;--_x:.04px} .container:has(label:nth-child(3) input:chec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0