div+css实现聚焦式滑动列表radio单选选择器代码
代码语言:html
所属分类:其他
代码描述:div+css实现聚焦式滑动列表radio单选选择器代码
代码标签: div css 聚焦式 滑动 列表 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=DM+Sans&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.65,0,0.35,1); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320)); } body, input { color: var(--fg); font: 1em/1.5 "DM Sans", sans-serif; } body { background-color: var(--bg); display: flex; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } main { margin: auto; padding: 1.5em 0; width: 100%; } form { margin: auto; max-width: 20em; position: relative; width: calc(100% - 3em); } label, input[type="radio"] { cursor: pointer; -webkit-tap-highlight-color: transparent; } label { background-color: hsla(0,0%,100%,0); border-radius: 0.75em; display: flex; align-items: center; padding: 1.5em; transition: background-color var(--trans-dur); } input[type="radio"] { background-color: hsl(0,0%,100%); border-radius: 50%; box-shadow: 0 0 0 0.0625em hsl(var(--hue),90%,80%), 0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3); flex-shrink: 0; margin-inline-end: 1em; outline: transparent; position: relative; width: 1.5em; height: 1.5em; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); -webkit-appearance: none; appearance: none; } input[type="radio"]:before, input[type="radio"]:after { border-radius: 50%; content: ""; display: block; position: absolute; transform: scale(0); transition: transform var(--trans-dur) var(--trans-timing); } input[type="radio"]:before { box-shadow: 0 0 0 0.5em var(--primary) inset, 0 0 0 0.0625em var(--primary); top: -0.0625em; left: -0.0625em; width: calc(100% + 0.125em); height: calc(100% + 0.125em); } input[type="radio"]:after { background-color: hsl(0,0%,100%); top: 25%; left: 25%; width: 50%; height: 50.........完整代码请登录后点击上方下载按钮下载查看
网友评论0