css+js美化range实现发光的滑动取值器代码
代码语言:html
所属分类:表单美化
代码描述:css+js美化range实现发光的滑动取值器代码
代码标签: css js 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 { --hue: 223; --white: hsl(var(--hue),10%,100%); --gray1: hsl(var(--hue),10%,90%); --gray2: hsl(var(--hue),10%,80%); --gray7: hsl(var(--hue),10%,30%); --gray9: hsl(var(--hue),10%,10%); font-size: calc(16px + (48 - 16) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: var(--gray9); color: var(--gray1); height: 100vh; display: grid; place-items: center; } /* Main styles */ .gr-glow { --gradient: linear-gradient(90deg,hsl(3,90%,55%),hsl(63,90%,55%) 6em,hsl(123,90%,55%) 12em); --percent: 50%; display: flex; align-items: center; position: relative; margin: 0.5em 0; width: 12em; height: 1.5em; } .gr-glow:before { background-image: var(--gradient); border-radius: 0.5em; content: ""; display: block; filter: blur(0.6em); position: absolute; top: 25%; left: 0; width: var(--percent); height: 50%; z-index: -1; } .gr-input { background: var(--gray7) var(--gradient) no-repeat; background-size: var(--percent) 100%; border-radius: 0.5em; width: inherit; height: 0.75em; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .gr-input:focus { outline: transparent; } /* WebKit */ .gr-input::-webkit-slider-thumb { background-color: var(--white); border: 0; border-radius: 50%; box-shadow: 0 0 0 0.0625em var(--gray2) inset; width: 1.5em; height: 1.5em; transition: background-color 0.15s linear; -webkit-appearance: none; appearance: none; } .gr-input:focus::-webkit-slider-thumb, .gr-input::-webkit-slider-thumb:hover { background-color: var(--gray1); } /* Firefox */ .gr-input::-moz-range-thumb { background-color: var(--white); border: 0; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0