rxjs实现滑块拖动数字变化代码
代码语言:html
所属分类:拖放
代码描述:rxjs实现滑块拖动数字变化代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,700"); :root { --value-progress: calc(var(--value, 6) / 12); font-family: Open Sans, sans-serif; font-weight: 300; font-size: 2.5vh; } #app { height: 96vh; width: 54vh; background: linear-gradient(to top right, #f76464, #ff8605, #EC4E91, #9535D3, #4DACFF); background-size: 400% 400%; background-position: calc(var(--value-progress) * 100%) 0; color: white; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; box-shadow: 0 0 4vh rgba(0, 0, 0, 0.1); } @media (max-width: 740px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { #app { width: 100%; height: 100%; } } .ui-header { height: 8vh; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 2vh; background: white; color: #B5B5B5; } .ui-header > * { width: 25%; flex: 0 0 25%; } .ui-header > .ui-text.-app-title { text-align: center; flex: 1 0 auto; white-space: nowrap; } .ui-header > .ui-text:last-child { text-align: right; } .ui-content { flex: 1 0 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 8vh; } .ui-discounts { padding: 2vh 0; text-align: center; width: calc(100% - 6vh); margin: 0 2vh; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } .ui-discounts > .ui-text { margin: 1vh 0; line-height: 1; letter-spacing: 0.5px; } .ui-value { height: 24vh; width: 28.8vh; line-height: 24vh; margin: 2vh 0; font-weight: 700; } .ui-value:before, .ui-value:after { display: block; position: absolute; height: 4vh; line-height: 4vh; top: calc(50% - 2vh); font-weight: 300; font-size: 2.5vh; letter-spacing: 0.5px; transition: transform 0.6s ease; } .ui-value:before { content: "Every"; right: 100%; transform: translateX(calc(var(--changing) * -50%)); } .ui-value:after { content: "hours"; left: 100%; transform: translateX(calc(var(--changing) * 50%)); } .ui-digit { position: absolute; font-size: 24vh; width: 100%; text-align: center; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #num1 { transform: translateX(calc(var(--progress, 0) * -10vh)) scale(calc(1 + var(--progress, 0))); opacity: calc(1 - var(--progress, 0)); filter: blur(calc(var(--progress) * 2px)); } #num2 { transform: translateX(calc(var(--progress, 0) * -10vh + 10vh)) scale(calc(var(--progress, 0))); opacity: var(--progress, 0); } .ui-panel { width: 100%; } .ui-controls { background: white; padding: 6vh 4vh; } .ui-switch { margin: 0 auto; top: 2vh; width: 8vh; height: 4vh; border-radius: 4vh; background-image: linear-gradient(to right, #FF6850, #FF8A2B); } .ui-switch:before, .ui-switch:after { position: absolute; color: #656565; margin: 0 2vh; height: 2vh; top: calc(50% - 1vh); display: block; font-size: 2vh; line-height: 2vh; letter-spacing: 0.5px; } .ui-switch:before { content: "Off"; right: 100%; } .ui-switch:after { content: "On"; left: 100%; } input#switch { position: absolute; opacity: 0; pointer-events: none; } input#switch:checked + #app * .ui-switch-track { transform: translateX(-2vh) scale(0.8); } input#switch:checked + #app * .ui-range-track { display: none; } input#switch:not(:checked) + #app { --thumb-opacity: 0; } .ui-switch-track { position: absolute; top: 0; left: calc(50% - 2vh); width: 4vh; height: 4vh; border-radius: 50%; border: 0.5vh solid rgba(255, 255, 255, 0.1); background: white; display: block; transform: translateX(2vh) scale(0.8); transition: transform 0.3s ease; box-shadow: 0 0 1vh rgba(0, 0, 0, 0.1); } .ui-range { width: 100%; background: white; z-index: 1; } .ui-range > input { position: absolute; z-index: 1; top: -3vh; } .ui-range-track { position: absolute; top: 1vh; width: calc(100% - 8vh); transform: translateX(calc(var(--value, 6) / 12 * 100% - 50%)); left: 4vh; z-index: 1; pointer-events: none; } .ui-range-track:before, .ui-range-track:after { content: ""; position: absolute; width: 8vh; height: 8vh; border-radius: 50%; top: -4vh; left: calc(50% - 4vh); background: white; } .ui-range-track:before { transform: scale(1.2); } .ui-range-track:after { content: ""; font-family: FontAwesome; font-size: 4vh; line-height: 8vh; color: #FF6850; text-align: center; top: -4vh; box-shadow: 0 0.5vh 2vh 0.5vh rgba(0, 0, 0, 0.1); } .ui-range-ticks { width: 100%; height: 3vh; margin-bottom: 6vh; display: flex; flex-direction: row; justify-content: space-between; padding: 0 2vh; } .ui-range-tick { width: 4vh; transform: translateY(calc(var(--proximity) * 1vh - 1vh)); } .ui-range-tick:before { content: attr(data-value); display: block; width: 100%; text-align: center; transform: scale(calc((2 - var(--proximity)) / 3 + 1)); transform-origin: bottom center; } .ui-range-tick:after { content: ""; position: absolute; display: block; width: 1px; height: 1vh; background: white; left: calc(50% - 0.5px); top: calc(100% + 1vh); transform: translateY(calc(var(--proximity) * 0.5vh - 0.5vh)); } .ui-footer { color: #B5B5B5; background: white; padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; box-shadow: 0 -0.5rem 1rem rgba(128, 128, 128, 0.1); z-index: 1; } body { display: flex; justify-content: center; align-items: center; background-image: linear-gradient(to bottom right, white, #E7E7EF); } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } svg { display: none; } *, *:before, *:after { box-sizing: border-box; position: relative; } [type=range] { -webkit-appearance: none; margin: 4vh 0; width: 100%; } [type=range]:focus { outline: 0; } [type=range]:focus::-webkit-slider-runnable-track { background: #fcfcfc; } [type=range]:focus::-ms-fill-lower { background: #EFEFEF; } [type=range]:focus::-ms-fill-upper { background: #fcfcfc; } [type=range]::-webkit-slider-runnable-track { cursor: pointer; height: 1px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; width: 100%; o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0