js+css实现像虫子爬行一样的checkbox开关效果代码
代码语言:html
所属分类:表单美化
代码描述:js+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"> <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; --bg1: hsl(var(--hue),10%,90%); --bg2: hsl(var(--hue),10%,80%); --fg: hsl(var(--hue),10%,10%); --primary1: hsl(var(--hue),90%,55%); --primary2: hsl(var(--hue),90%,45%); font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body, button, input { font: 1em/1.5 "DM Sans", sans-serif; } body, input { color: var(--fg); } body { background-color: var(--bg1); display: grid; place-items: center; height: 100vh; overflow-x: hidden; transition: background-color 0.3s ease-in-out; } button { background-color: var(--primary1); border-radius: 0.2em; color: hsl(0,0%,100%); padding: 0.5em 1em; text-align: center; transition: background-color 0.15s linear; } button:hover { background-color: var(--primary2); } form { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5em 0; } .toggle-label { display: flex; margin-bottom: 1.5em; transition: transform 0.3s ease-in-out; -webkit-tap-highlight-color: transparent; } .toggle-label:last-of-type { margin-bottom: 3em; } .toggle-label-sr { clip: rect(1px,1px,1px,1px); overflow: hidden; position: absolute; width: 1px; height: 1px; } .toggle { position: relative; width: 3em; height: 1.5em; -webkit-appearance: none; appearance: none; } .toggle:before, .toggle:after { animation-duration: 0.6s; animation-timing-function: ease-in-out; content: ""; display: block; position: absolute; } .toggle:before { background-color: var(--bg2); border-radius: 0.75em; top: 0; left: 0; width: 100%; height: 100%; transition: background-color 0.3s ease-in-out; } .toggle:after { background-color: hsl(0,0%,100%); border-radius: 50%; top: 0.25em; left: 0.25em; width: 1em; height: 1em; transition: left 0.3s ease-in-out; } .toggle:checked:before { background-color: var(--primary1); } .toggle:checked:after { left: 1.75em; } .toggle-label--off, .toggle-label--off .toggle:after, .toggle-label--on, .toggle-label--on .toggle:after { transition: none; } .toggle-label--off .toggle:before, .toggle-label--on .toggle:before { animation-name: crawlBefore; } .toggle-label--on .toggle:after { animation-name: crawlAfter; } /* Dark the.........完整代码请登录后点击上方下载按钮下载查看
网友评论0