css+js实现可调节滑动旋钮面板效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现可调节滑动旋钮面板效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> /** Mixins **/ /** Base Styles **/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: "Roboto", "Myriad Pro", sans-serif; line-height: 1; background: url("//repo.bfw.wiki/bfwrepo/image/6066911813b2f.png") center center no-repeat; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** Knob Styles **/ .knob { display: flex; justify-content: center; align-items: center; width: 50rem; height: 50rem; position: relative; } .knob-outer { display: flex; justify-content: center; align-items: center; width: 33rem; height: 33rem; position: relative; z-index: 1; border-radius: 50%; background-color: #42444a; overflow: hidden; } .knob-outer::before { content: ""; position: absolute; left: -10rem; bottom: 5rem; width: 10rem; height: 10rem; border-radius: 50%; box-shadow: 0 0 10rem 10rem #d5a362; opacity: 0.25; } .knob-inner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 24rem; height: 24rem; position: relative; border-radius: 50%; background-color: #f2f2f2; overflow: hidden; } .knob-value { width: 12rem; height: 12rem; margin: 2rem 0; position: relative; z-index: 1; font-size: 6rem; font-weight: 100; text-align: center; line-height: 12rem; color: #71727b; border-radius: 50%; background-color: #fff; } .knob-value-progress { height: 0; position: absolute; left: 0; right: 0; bottom: 0; background-color: #d8e3ea; transition: height 500ms ease-out; } .knob-arrow { width: 4rem; height: 1.5rem; position: relative; z-index: 1; cursor: pointer; outline: none; } .knob-arrow::before, .knob-arrow::after { content: ""; width: 2.4rem; height: 3px; position: absolute; top: 0; left: 50%; background-color: #ccc; transform-origin: left center; transform: rotate(30deg); } .knob-arrow::after { transform: rotate(150deg); } .knob-arrow.down::before, .knob-arrow.down::after { top: auto; bottom: 0; transform: rotate(-30deg); } .knob-arrow.down::after { transform: rotate(-150deg); } .knob-indicator { width: 1rem; height: 1rem; border: 1px solid #fff; position: absolute; top: calc(50% - 0.5rem); left: calc(50% - 0.5rem); z-index: 1; border-radius: 50%; cursor: pointer; transition: background-color 250ms ease-out; } .knob-indicator:hover { background-color: #fff; } .progress-label { width: 10rem; position: absolute; top: 50%; font-size: 1.4rem; text-align: center; text-transform: uppercase; color: #a0a2a9; } .progress-label.contrast { left: -2.5rem; transform: rotate(-90deg); } .progress-label.brightness { right: -2.5rem; transform: rotate(90deg); } /** Progress Bars Styles **/ .progress-bars { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .progress-bars path { stroke-dashoffset: 605; transition: stroke-dashoffset 500ms ease-out; } </style> </head> <body> <div class="knob"> <div class="knob-outer"> <div class="knob-inner"> <div class="knob-arrow up"></div> <div class="knob-value">0</div> <div class="knob-arrow down"></div> <div class="knob-value-progress"></div> </div> <div class="knob-indicator contrast" data-angle="0"></div> <div class="knob-indicator brightness" data-angle="0"></div> </div> <div class="progress-label contrast">Contrast</div> <div class="progress-label brightness">Brightness</div> <svg class="progress-bars" width="500" height="500"> <path d="M 240 445 A 190 195 0 1 1 240 55" fill=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0