js+css实现铁三角定律拖动效果代码
代码语言:html
所属分类:拖放
代码描述:js+css实现铁三角定律拖动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> input { position: absolute; left: 50%; top: 50%; font-family: inherit; color: var(--fg); background: var(--b); padding: 0.875em; border-radius: 1.5em; border: 1px solid transparent; outline: 1px solid transparent; box-shadow: 0 3px 2px -3px var(--bor); transform-origin: left center; } input[type=range] { --pad: 4px; --track: hsl(calc(var(--value)), 70%, 70%); appearance: none; width: 250px; height: calc(1.5em + var(--pad) * 2); background: var(--b); border: none; outline: none; padding: 0 var(--pad); margin-inline: 0.5em; } label { text-align: center; position: absolute; left: 50%; top: 50%; width: fit-content; z-index: 3; } input[name=quality] { width: 220px; transform: translateY(10px) translateX(0) rotate(-90deg); } input[name=speed] { transform: translateY(10px) translateX(0) rotate(40deg); } input[name=cost] { transform: translateY(10px) translateX(0) rotate(140deg); } label[for=quality] { transform: translateY(-220px) translateX(-40%) rotate(0deg); } label[for=speed] { transform: translateY(80px) translateX(110px) rotate(40deg); } label[for=cost] { transform: translateY(80px) translateX(-135px) rotate(-40deg); } input[type=range]::-webkit-slider-runnable-track { background: var(--track); display: block; width: calc(100% + var(--pad) * 2); height: calc(1.5em + var(--pad) * 2); border-radius: 1.5em; margin-inline: calc(var(--pad) * -1); transition: background 0.25s ease-in; will-change: opacity, background; padding: 0.2em var(--pad); } input[type=range]::-moz-range-track { background: var(--track); display: block; width: calc(100% + var(--pad) * 2); height: calc(1.5em + var(--pad) * 2); border-radius: 1.5em; margin-inline: calc(var(--pad) * -1); transition: background 0.25s ease-in; will-change: opacity, background; padding: 0.2em var(--pad); } input[type=range]::-ms-track { background: var(--track); display: block; width: calc(100% + var(--pad) * 2); height: calc(1.5em + var(--pad) * 2); border-radius: 1.5em; margin-inline: calc(var(--pad) * -1); transition: background 0.25s ease-in; will-change: opacity, background; padding: 0.2em var(--pad); } input[type=range]::-webkit-slider-thumb { appearance: none; width: 1.65em; height: 1.65em; border: none; outline: none; background: var(--bg); border-radius: 1.25em; transform: translate3d(0, 0, 0); } input[type=range]::-moz-range-thumb { appearance: none; width: 1.65em; height: 1.65em; border: none; outline: none; background: var(--bg); border-radius: 1.25em; transform: translate3d(0, 0, 0); } input[typ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0