svg+css实现电源checkbox开关点击切换代码
代码语言:html
所属分类:布局界面
代码描述:svg+css实现电源checkbox开关点击切换代码
代码标签: svg css checkbox 电源 开关 点击 切换 代码
下面为部分代码预览,完整代码请点击下载或在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"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,50%); --primary-t: hsla(var(--hue),90%,50%,0); --unchecked: hsl(var(--hue),10%,70%); --checked: hsl(133,70%,40%); --trans-dur: 0.4s; --trans-timing1: cubic-bezier(0.65,0,0.35,1); --trans-timing2: cubic-bezier(0.68,-0.6,0.32,1.6); font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320)); } body, input { color: var(--fg); font: 1em/1.5 sans-serif; transition: background-color var(--trans-dur), color var(--trans-dur); } body { background-color: var(--bg); display: flex; height: 100vh; } .switch, .switch__input { -webkit-tap-highlight-color: transparent; } .switch { display: flex; align-items: center; margin: auto; } .switch__input { background-color: var(--unchecked); border-radius: 0.75em; box-shadow: 0 0 0 0.125em var(--primary-t); outline: transparent; position: relative; width: 2.25em; height: 1.5em; transition: background-color var(--trans-dur) var(--trans-timing1), box-shadow 0.15s var(--trans-timing1), transform var(--trans-dur) var(--trans-timing2); -webkit-appearance: none; appearance: none; } .switch__input:focus-visible { box-shadow: 0 0 0 0.125em var(--primary); } .switch__input:before { background-color: var(--bg); border-radius: 50%; content: ""; display: block; position: absolute; top: 0.25em; left: 0.25em; transition: background-color var(--trans-dur), transform var(--trans-dur) var(--trans-timing2); width: 1em; height: 1em; } .switch__letters, .switch__letter { transition: transform var(--trans-dur) var(--trans-timing2); } .switch__letters { margin-left: 0.375em; overflow: visible; pointer-events: none; width: 1.5em; height: 1.5em; } .switch__letter:last-child { transform: translateX(14px); } .switch__letter-stroke { stroke: var(--unchecked); transition: stroke var(--trans-dur) var(--trans-timing1), stroke-dashoffset var(--trans-dur) var(--trans-timing2), transform var(--trans-dur) var(--trans-timing2); } .switch__letter-stroke:nth-child(2) { transform-origin: 2px 2px; } .switch__text { overflow: hidden; position: absolute; width: 1px; height: 1px; } /* “on” state */ .switch__input:chec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0