css+js实现立体小球radio单选框勾选美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现立体小球radio单选框勾选美化效果代码
代码标签: css js 立体 小球 radio 单选框 勾选 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --transDur: 0.4s; --timing: ease-in-out; font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } @supports (font-size: clamp(20px,1em + 1vw,30px)) { :root { font-size: clamp(20px,1em + 1vw,30px); } } body, input { font: 1em/1.5 "Varela Round", sans-serif; } body, label { display: flex; } body { background: #5583f6; color: #17181c; height: 100vh; } form { background: #b6cafb; border-radius: 0.75em; box-shadow: 0.1em 0.1em 0 #fff2 inset, -0.1em -0.1em 0 #0002 inset, 0 0.5em 1.5em #0007; margin: auto; padding: 0.75em 1.5em; } input[type=radio], label { cursor: pointer; } input[type=radio], input[type=radio]:before, input[type=radio]:after { border-radius: 50%; width: 3em; height: 3em; } input[type=radio] { box-shadow: 0.25em 0.25em 0.5em #0004, 0 -0.1em 0 0.1em #0004, 0 0.1em 0 0.1em #fff4, 0 0 1.5em #0004 inset; margin-right: 0.75em; transition: box-shadow var(--transDur) var(--timing); -webkit-appearance: none; appearance: none; } input[type=radio]:before, input[type=radio]:after { backface-visibility: hidden; -webkit-backface-visibility: hidden; content: ""; display: block; position: absolute; top: 0; left: 0; } input[type=radio]:before { animation: flipFalseBefore var(--transDur) var(--timing); background: linear-gradient(#0000 25%,#0004 75%), radial-gradient(50% 100% at 15% 50%,#0b46da 8%,#0b46da00 24%), radial-gradient(50% 100% at 85% 50%,#0b46da 8%,#0b46da00 24%), radial-gradient(100% 100% at center,#3368f500 41%,#3368f5 46%), radial-gradient(100% 100% at center,#0d4df200 36%,#0d4df2 38%), radial-gradient(100% 100% at 22% 38%,#fff4 6%,#fff0 12%), radial-gradient(100% 100% at 35% 25%,#fff4,#fff0 13%), radial-gradient(120% 100% at 50% 20%,#fff2,#fff0 13%), radial-gradient(100% 100% at 40% 40%,#fff4 4%,#fff0 12%), radial-gradient(100% 100% at 65% 20%,#fff4 4%,#fff0 12%), radial-gradient(100% 100% at 75% 33%,#fff4 6%,#fff0 12%), radial-gradient(3em 3em at center,#386DF5 13%,#255ff4 25% 49%,#255ff400 50%); background-position: 0 0; background-repeat: no-repeat; background-size: 3em 3em; } input[type=radio]:checked:before { animation: flipTrueBefore var(--transDur) var(--timing); border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%; height: 1.5em; } input[type=radio]:after { animation: flipFalseAfter var(--transDur) var(--timing); background: #fff; box.........完整代码请登录后点击上方下载按钮下载查看
网友评论0