css+js实现伸缩跳动小球开关效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现伸缩跳动小球开关效果代码
下面为部分代码预览,完整代码请点击下载或在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),90%,90%); --fg: hsl(var(--hue),90%,5%); --primary: hsl(var(--hue),90%,50%); --primary-dim: hsl(var(--hue),10%,70%); --dur: 1s; --trans-dur: 0.3s; font-size: calc(20px + (40 - 20) * (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); } .toss-toggle, .toss-toggle__input { width: 3em; height: 1.5em; } .toss-toggle { position: relative; } .toss-toggle__input, .toss-toggle__ball, .toss-toggle__ball:before { animation: launchLeft var(--dur) ease-in-out; position: absolute; } .toss-toggle__input { background-color: var(--primary-dim); border-radius: 0.75em; display: block; top: 0; left: 0; transform-origin: 0.75em 0.75em; transition: background-color var(--trans-dur); -webkit-appearance: none; appearance: none; } .toss-toggle__input:checked { animation-name: launchRight; background-color: var(--primary); right: 0; left: auto; transform-origin: calc(100% - 0.75em) 0.75em; } .toss-toggle__ball, .toss-toggle__ball:before { animation-name: flyLeftX; border-radius: 50%; display: block; } .toss-toggle__ball { pointer-events: none; top: 50%; left: 50%; width: 1em; height: 1em; transform: translate(-50%,-50%) translateX(0.75em) rotate(0) translateX(-1.5em); } .toss-toggle__ball:before { animation-name: flyLeftY; background-color: hsl(0,0%,100%); content: ""; top: 0; left: 0; width: 100%; height: 100%; } .toss-toggle__input:checked ~ .toss-toggle__ball { animation-name: flyRightX; transform: translate(-50%,-50%) translateX(-0.75em) rotate(0) translateX(1.5em); } .toss-toggle__input:checked ~ .toss-toggle__ball:before { animation-name: flyRightY; } .toss-toggle--pristine .toss-toggle__input, .toss-toggle--pristine .toss-toggle__ball, .toss-toggle--pristine .toss-toggle__ball:before { animation: none; } .toss-toggle__sr { overflow: hidden; position: absolute; width: 1px; height: 1px; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,5%); --fg: hsl(var(--hue),90%,90%); --primary-dim: hsl(var(--hue),10%,30%); } } /* Animations */ @keyframes launchRight { from { background-color: var(--primary-dim); width: 3em; transform: rotate(0); } 25% { animation-timing-function: ease-in; background-color: var(--primary-dim); width: 4.5em; transform: rotate(-15deg); } 50%, 75% { animation-timing-function: ease-in-out; background-color: var(--primary-dim); width: 4.5em; transform: rotate(15deg); } to { background-color: var(--primary); width: 3em; transform: rotate(0); } } @keyframes flyRightX { from { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0