css实现checkbox百叶窗式开关切换动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现checkbox百叶窗式开关切换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --primary: #255ff4; --primary-blur: rgba(37, 95, 244, 0); --switch-on: #09aa11; --trans-dur: 0.45s; font-size: calc(40px + (60 - 40) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: var(--bg); color: var(--fg); height: 100vh; display: grid; place-items: center; transition: background-color var(--trans-dur), color var(--trans-dur); } .toggle { position: relative; display: flex; width: 4em; height: 2em; } .toggle__input, .toggle__segment { display: block; position: absolute; } .toggle__input { background-color: #c7cad1; border-radius: 1em; box-shadow: 0 0 0 0.125em var(--primary-blur); inset: 0; transition: background-color var(--trans-dur) ease-in-out, box-shadow 0.3s ease-in-out; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .toggle__input:focus { box-shadow: 0 0 0 0.125em var(--primary); outline: transparent; } .toggle__segment { background-color: white; border-radius: 50%; top: 0; left: 0; width: 50%; height: 100%; transition: transform var(--trans-dur) ease-in-out; transform: translateX(0) scale(0.75); } .toggle__segment:nth-of-type(1) { clip-path: polygon(0% 0, 10% 0, 10% 100%, 0% 100%); transition-delay: calc(var(--trans-dur) / 10 * 0); } .toggle__segment:nth-of-type(2) { clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); transition-delay: calc(var(--trans-dur) / 10 * 1); } .toggle__segment:nth-of-type(3) { clip-path: polygon(20% 0, 30% 0, 30% 100%, 20% 100%); transition-delay: calc(var(--trans-dur) / 10 * 2); } .toggle__segment:nth-of-type(4) { clip-path: polygon(30% 0, 40% 0, 40% 100%, 30% 100%); transition-delay: calc(var(--trans-dur) / 10 * 3); } .toggle__segment:nth-of-type(5) { clip-path: polygon(40% 0, 50% 0, 50% 100%, 40% 100%); transition-delay: calc(var(--trans-dur) / 10 * 4); } .toggle__segment:nth-of-type(6) { clip-path: polygon(50% 0, 60% 0, 60% 100%, 50% 100%); transition-delay: calc(var(--trans-dur) / 10 * 5); } .toggle__segment:nth-of-type(7) { clip-path: polygon(60% 0, 70% 0, 70% 100%, 60% 100%); transition-delay: calc(var(--trans-dur) / 10 * 6); } .toggle__segment:nth-of-type(8) { clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); transition-delay: calc(var(--trans-dur) / 10 * 7); } .toggle__segment:nth-of-type(9) { clip-path: polygon(80% 0, 90% 0, 90% 100%, 80% 100%); transition-delay: calc(var(--trans-dur) / 10 * 8); } .toggle__segment:nth-of-type(10) { clip-path: polygon(90% 0, 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0