svg+js实现钻石数量选择拖动条效果代码
代码语言:html
所属分类:表单美化
代码描述:svg+js实现钻石数量选择拖动条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"); * { box-sizing: border-box; position: relative; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; font-family: Poppins, sans-serif; } html *::-moz-selection, body *::-moz-selection { background: var(--color-primary); color: white; } html *::selection, body *::selection { background: var(--color-primary); color: white; } :root { --color-primary: #fb6446; } body { background: #e8e8f0; color: #111e3c; min-height: 100vh; display: grid; place-items: center; } .app { background-color: #fff; padding: 2rem 3rem; overflow: hidden; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); border-radius: 1em; display: flex; flex-direction: column; gap: 1rem; } .diamond-slider { margin-top: 5rem; margin-bottom: 1rem; } .diamond-slider #slider { display: block; width: 100%; } .slider { display: grid; grid-template-areas: "layer"; align-items: center; } .slider > * { grid-area: layer; } .slider .slider-input { opacity: 0; width: 100%; height: 100%; z-index: 10; } .slider .slider-track { height: 0.25em; background: #ddd; border-radius: 0.25em; } .slider .slider-diamond { position: absolute; left: 0; bottom: 100%; width: 100%; transform: translateX(calc(var(--d) * 100%)); } .slider .slider-diamond-inner { width: 3em; height: 3em; margin: 0 -1.3em; transform: scale(0); transition: transform 0.2s ease-in-out 0.5s; transform-origin: bottom center; display: grid; place-items: center; grid-template-area: "layer"; --rotate: rotate(calc(var(--tilt) * -10deg)); } .slider .slider-diamond-inner:before { grid-area: layer; content: attr(data-value); color: white; font-weight: bold; text-align: center; z-index: 1; padding-bottom: 0.4em; transform-origin: bottom center; transform: var(--rotate); } .slider .slider-diamond-inner svg { grid-area: layer; display: block; width: 100%; height: 100%; transform: var(--rotate); transform-origin: bottom center; fill: var(--color-primary); } .slider:hover .slider-diamond-inner, .slider:focus .slider-diamond-inner { transform: scale(1); transition-delay: 0s; } .slider .slider-thumb { width: 100%; transform: translateX(calc(var(--d) * 100%)); } .slider .slider-thumb::before { content: ""; display: block; width: 1.5em; height: 1.5em; border: solid 0.3em var(--color-primary); border-radius: 1em; margin: 0 -0.5em; box-sizing: border-box; transition: border-width 0.2s ease-in-out; } .slider .slider-input { cursor: -webkit-grab; cursor: grab; } .slider .slider-input:active { cursor: -webkit-grabbing; cursor: grabbing; } .slider .slider-input:active ~ .slider-thumb::before { border-width: 0.6em; } h1 { font-weight: normal; } output { display: block; font-size: 2rem; text-align: right; font-weight: bold; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .checkout { display: flex; flex-direction: row-reverse; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: white; background: #0f0f0f; padding: 1rem; font-size: 0.75rem; border-radius: 0.5rem; font-family.........完整代码请登录后点击上方下载按钮下载查看
网友评论0