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=DM+Sans&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,80%); --fg: hsl(var(--hue),90%,10%); --radio-off: hsl(var(--hue),90%,90%); --radio-on: hsl(var(--hue),90%,50%); --radio-down: hsl(var(--hue),90%,70%); --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; transition: background-color var(--trans-dur), color var(--trans-dur); } body { background-color: var(--bg); display: flex; height: 100vh; } form { background-color: hsl(0,0%,100%); border-radius: 0.75em; margin: auto; padding: 0.75em; min-width: 15em; transition: background-color var(--trans-dur); } label, input[type="radio"] { cursor: pointer; -webkit-tap-highlight-color: transparent; } label { display: flex; align-items: center; padding: 0.75em 0.75em 0.75em 3em; position: relative; } input[type="radio"] { background-color: var(--radio-off); border-radius: 0.75em; outline: transparent; position: absolute; bottom: 0.75em; left: 0.75em; width: 1.5em; height: 1.5em; transition: background-color var(--trans-dur) var(--trans-timing); -webkit-appearance: none; appearance: none; } input[type="radio"]:checked { background-color: var(--radio-on); } input[type="radio"]:not(:checked):active { background-color: var(--radio-down); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); --radio-off: hsl(var(--hue),90%,40%); --radio-on: hsl(var(--hue),90%,90%); --radio-down: hsl(var(--hue),90%,60%); } form { background-color: hsl(var(--hue),90%,20%); } } </style> </head> <body translate="no"> <form> <label> <input type="radio" name="os" data-option="0" value="windows" checked> Windows </label> <label> <input type="radio" name="os" data-option="1" value="mac"> Mac </label> <label> <input type="radio" name="os" data-option="2" value="linux"> Linux </label> </form> <script> window.addEventListener("DOMContentLoaded",() => { const.........完整代码请登录后点击上方下载按钮下载查看
网友评论0