js+css实现三维滑块选择器取值器效果代码
代码语言:html
所属分类:选择器
代码描述:js+css实现三维滑块选择器取值器效果代码
下面为部分代码预览,完整代码请点击下载或在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=Source+Code+Pro:wght@300;400&display=swap'> <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%,55%); --trans-dur: 0.3s; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body, button, input { font: 1em/1.5 "Source Code Pro", monospace; } body { background-color: var(--bg); color: var(--fg); height: 100vh; display: grid; overflow: hidden; place-items: center; transition: background-color var(--trans-dur), color var(--trans-dur); } .rs, .rs__rings { position: relative; } .rs { --rel-value: 0; --range-units: 1; transition: transform 0.3s ease-in-out; } .rs__range-wrap, .rs__rings { transform: rotateX(30deg) rotateY(30deg); transform-style: preserve-3d; } .rs__range:focus, .rs__handle:focus { outline: transparent; } .rs__range-wrap { display: none; position: absolute; inset: 0; z-index: 1; } .rs__range { background-color: transparent; position: absolute; top: 50%; left: 50%; width: 24em; height: 12em; transform: translate(-50%,-50%) rotateX(90deg) rotateZ(90deg); -webkit-appearance: none; appearance: none; } .rs__range::-webkit-slider-thumb { background-color: transparent; border: 0; width: 12em; height: 8em; transform: skewY(30deg); -webkit-appearance: none; appearance: none; } .rs__range::-moz-range-thumb { background-color: transparent; border: 0; width: 12em; height: 8em; transform: skewY(30deg); } .rs__rings { z-index: 0; } .rs__handle, .rs__ring { border-radius: 2em; box-shadow: 0 0 0 0.25em inset; } .rs__handle { background-color: transparent; color: var(--fg); position: relative; width: 8em; height: 8em; transition: box-shadow var(--trans-dur), color var(--trans-dur), transform var(--trans-dur) linear; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .rs__handle:before { animation: handleBlur var(--trans-dur) ease-in-out; border-radius: 50%; box-shadow: 0 0 0 0 inset; content: ""; display: block; opacity: 0.1; position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; } .rs__handle:focus { color: var(--primary); } .rs__handle-value { font-size: 3em; font-weight: 300; line-height: 1; } .rs__ring { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; visibility: hidden; transition: transform var(--trans-dur) linear, visibility var(--trans-dur) steps(1); } .rs--pristine .rs__handle:before { animation: none; } .rs--active .rs__handle { pointer-events: none; transform: translateZ(calc(-6em + (var(--rel-value) / var(--range-units) * 12em))); } .rs--active .rs__handle:before { animation: handleFocus 0.6s ease-in-out; box-shadow: 0 0 0 6em inset; transform: scale(0.4); } .rs--active .rs__range-wrap { display: block; } .rs--active .rs__ring { visibility: visible; transition-duration: var(--trans-dur), 0s; } .rs--active .rs__ring:nth-of-type(1) { transform: translateZ(6em); } .rs--active .rs__ring:nth-of-type(2) { transform: translateZ(4em); } .rs--active .rs__ring:nth-of-type(3) { transform: translateZ(2em); } .rs--active .rs__ring:nth-of-type(4) { transform: translateZ(0); } .rs--active .rs__r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0