js+css实现三维立体凹凸滚雪球拖动range取值器代码
代码语言:html
所属分类:拖放
代码描述:js+css实现三维立体凹凸滚雪球拖动range取值器代码
代码标签: js css 三维 立体 凹凸 滚 雪球 拖动 range 取值器 代码
下面为部分代码预览,完整代码请点击下载或在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 { font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320)); } body, input { font: 1em/1.5 "Delius Unicase", sans-serif; } body { background-color: #e7edfe; display: flex; height: 100vh; } .range { --ball-x: 0; --ball-x-units: calc((var(--ball-x) * 100%) - (2.5em * var(--ball-x))); --tip-x-units: calc(1.25rem + (var(--ball-x) * 100%) - (2.5rem * var(--ball-x))); margin: auto; position: relative; max-width: 12.5em; width: 100%; } .range__label, .range__input { -webkit-tap-highlight-color: transparent; } .range__label { overflow: hidden; position: absolute; width: 1px; height: 1px; } .range__input { background-color: transparent; border-radius: 0.25em; cursor: pointer; display: block; margin: 0; width: 100%; height: 2.5em; -webkit-appearance: none; appearance: none; } .range__input::-webkit-slider-thumb { background-color: transparent; border: 0; border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-appearance: none; appearance: none; } .range__input::-moz-range-thumb { background-color: transparent; border: 0; border-radius: 50%; width: 2.5em; height: 2.5em; } .range__ball, .range__ball-inner-shadow, .range__ball-outer-shadow, .range__ball-side-shadows, .range__ball-texture, .range__ball-texture:before, .range__tip, .range__track { position: absolute; } .range__ball, .range__ball-inner-shadow, .range__ball-side-shadows, .range__ball-texture { border-radius: 50%; } .range__ball, .range__tip, .range__track { pointer-events: none; } .range__ball { top: 0; left: var(--ball-x-units); width: 2.5em; height: 2.5em; } .range__ball-inner-shadow { box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 0 0.2em rgba(0, 0, 0, 0.1) inset, 0 -1em 0.5em rgba(0, 0, 0, 0.15) inset; width: 100%; height: 100%; } .range__ball-outer-shadow, .range__ball-side-shadows { filter: blur(2px); width: 100%; } .range__ball-outer-shadow { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); border-radius: 0 0 50% 50%/0 0 100% 100%; top: 50%; left: 0; height: 250%; transform: rotate(20deg); transform-origin: 50% 0; z-index: -2; } .range__ball-side-shadows { background-color: rgba(0, 0, 0, 0.1); height: 100%; transform: scale(0.75, 1.1); z-index: -1; } .range__ball-texture { overflow: hidden; width: 100%; height: 100%; transform: translate3d(0, 0, 0); } .range__ball-texture:before { background: url(//repo.bfw.wiki/bfwrepo/image/65b4495a71529.png) 0 0/20% 100%; content: ""; display: block; filter: brightness(1.05); top: 0; right: 0; width: 500%; height: 100%; transform: translateX(calc(50% * var(--ball-x))); } .range__tip { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.4)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5em; font-weight: bold; display: flex; justify-content: center; align-items: center; bottom: 100%; left: var(--tip-x-units); text-shadow: 0 -0.125rem 0.125rem rgba(0, 0, 0, 0.15), 0 0.125rem 0.125rem rgba(255, 255, 255, 0.4); min-width: 2.5rem; height: 2.5rem; transform: translateX(-50%); } .r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0