css+js实现可拖动薄荷糖棒棒糖滑竿取值器代码
代码语言:html
所属分类:拖放
代码描述:css+js实现可拖动薄荷糖棒棒糖滑竿取值器代码
代码标签: 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; --red: hsl(345,100%,38%); --white: hsl(0,10%,100%); --blue: hsl(215, 100%, 20%); font-size: calc(24px + (64 - 24) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: var(--blue); color: var(--white); height: 100vh; display: grid; place-items: center; } /* Main styles */ .pm { --gradient1: linear-gradient( hsla(0,0%,100%,0) 0.1em, hsla(0,0%,100%,0.3) 0.2em 0.25em, hsla(0,0%,100%,0) 0.35em 0.5em, hsla(0,0%,100%,0.2) 0.55em 0.6em, hsla(0,0%,100%,0) 0.65em ); --gradient2: repeating-linear-gradient( 135deg, var(--red) 0 0.48em, var(--white) 0.5em 0.98em, var(--red) 1em 1.08em, var(--white) 1.1em 1.18em, var(--red) 1.2em 1.28em, var(--white) 1.3em 1.38em, var(--red) 1.4em 1.48em, var(--white) 1.5em 1.98em, var(--red) 2em ); --percent: 50%; display: flex; align-items: center; position: relative; margin: 0.5em 0; width: 10em; height: 1.5em; } .pm__input { background-color: hsl(0,0%,0%,0); border-radius: 0.375em; width: inherit; height: 0.75em; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; z-index: 3; } .pm__input:focus { outline: transparent; } /* WebKit handle */ .pm__input::-webkit-slider-thumb { background-color: hsla(0,0%,0%,0); border: 0; border-radius: 50%; width: 1.5em; height: 1.5em; -webkit-appearance: none; appearance: none; } /* Firefox handle */ .pm__input::-moz-range-thumb { background-color: hsla(0,0%,0%,0); border: 0; border-radius: 50%; width: 1.5em; height: 1.5em; } /* Main styles continued */ .pm:before { background: var(--gradient1), hsla(0,0%,100%,0.06); box-shadow: 0 0.05em 0.05em hsla(0,0%,0%,0.3) inset, 0 -0.05em 0.05em hsla(0,0%,0%,0.3) inset, 0 0 0.25em hsla(0,0%,0%,0.4) inset, 0 0.25em 0.15em hsla(0,0%,0%,0.2); z-index: 1; } .pm:before, .pm__input-fill, .pm__input-fill:before, .pm__input-handle-bg, .pm__input-handle-bg:before, .pm__input-handle-circle, .pm__input-handle-shadow { display: block; pointer-events: none; position: absolute; left: 0; } .pm:before, .pm__input-fill:before, .pm__input-handle-bg:before { content: ""; } .pm:before, .pm__input-fill { border-radius: 0.375em; top: 0.375em; width: 100%; height: 0.75em; } .pm__input-fill { overflow: hidden; } .pm__input-fill:before { background: var(--gradient2); width: 100%; height: 100%; transform: translateX(calc(-100% + var(--percent))); } .pm__input-handle-bg, .pm__input-handle-bg:before, .pm__input-handle-circle, .pm__input-handle-shadow { border-radius: 50%; top: 0; } .pm__input-handle-bg, .pm__input-handle-shadow { left: var(--percent); margin-left: -0.375em; width: 1.5em; height: 1.5em; z-index: 2; } .pm__input-handle-bg, .pm__input-handle-bg:before { transition: transform 0.3s ease-in-out; } .pm__input-handle-bg { background-color: var(--red); overflow: hidden; } .pm__input-handle-bg:before { box-shadow: 0 0 0.1em 0.1em hsla(0,0%,0%,1) inset, 0 0.1em 0.05em 0.1em hsla(0,0%,100%,1) inset; opacity: 0.4; width: 100%; height: 100%; z-index: 1; } .pm__input-handle-cir.........完整代码请登录后点击上方下载按钮下载查看
网友评论0