CSS旋钮小部件

下载代码

html

css

分享到微信朋友圈

html

css

@charset "UTF-8";
/*
 * 4 March 2022
 * CSS Knob widget with Range Slider
 * Inspired by Ana Tudor's 1 element range slider collection
 *
 * ? responsive
 * ? only 1 line of HTML
 * ? drag + keyboard accessible
 * ? UI created with CSS gradients & SASS generators
 * ? highly customizable with CSS & SASS variables
 * ? powered by 9* lines of JavaScript
 *
 * Tested on the latest versions of Chrome & Firefox
 * Open it in the details view for more information
 *
 */
@-webkit-keyframes appear {
  to {
    visibility: visible;
  }
}
@keyframes appear {
  to {
    visibility: visible;
  }
}
.knob {
  font-size: 0.152vmin;
  --full-angle: 250;
  --start-angle: 55;
  --size: 533;
  --knob-size: 300;
  --knob-tip-size: 9%;
  --knob-pseudo-size: 100;
  --knob-border-width: 1.6%;
  --knob-scale: calc(var(--knob-size) / var(--knob-pseudo-size));
  --calc-size: calc(var(--size) * 1em);
  --calc-knob-size: calc(var(--size) * (var(--knob-size) / 100) * 1em);
  --mapped: calc(
  	(var(--value) - var(--min, 0)) / (var(--max, 100) - var(--min, 0))
  );
  --current-angle: calc(var(--full-angle, 360) * var(--mapped, 0) * 1deg);
  --calc-size-diff: calc(var(--size) - var(--knob-pseudo-size));
  --center: calc(var(--calc-size-diff) * 0.5em);
  --translate: calc(
  	(var(--calc-size-diff) * var(--mapped, 0) * -1em) + var(--center)
  );
  --cur-drag: grab;
  --cur-dragging: grabbing;
  width: var(--calc-size);
  height: var(--calc-size);
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 533 533' width='533px' height='533px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='c-i'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i::before{--s:300px;content:\"\";position:absolute;left:50%25;top:50%25;transform:translate(-50%25,-50%25);width:calc(var(--s) - 2px);height:calc(var(--s) - 2px);border-radius:50%25;box-shadow:0 56px 70px 8px rgba(0,0,0,0.45),0 -50px 45px 26px rgba(255,255,255,0.6)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 5260 5260' width='5260px' height='5260px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E<div class=\"c-i\" style=\"--n:10\"><div class='s' style='--i:0'><div class='d d0'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:1'><div class='d d1'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:2'><div class='d d2'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:3'><div class='d d3'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:4'><div class='d d4'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:5'><div class='d d5'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:6'><div class='d d6'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:7'><div class='d d7'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:8'><div class='d d8'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:9'><div class='d d9'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div><div class='s' style='--i:10'><div class='d d1'><div class='a'></div><div class='b e'></div><div class='b c'></div></div><div class='d d0'><div class='a'></div><div class='b e'></div><div class='b c'></div></div></div></div>%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.s{--as:55;--ae:-0.6;--angle:calc(((250 - (var(--ae) * 2)) / var(--n)) * var(--i) * 1deg);position:absolute;left:50%25;top:50%25;transform:translate(-50%25, -50%25) rotate(90deg)rotate(calc((var(--as) + var(--ae)) * 1deg)) rotate(var(--angle))translateX(calc(\a 		5260 * (45.03726 / 100) * 1px\a 	)) rotate(-90deg)rotate(calc((var(--as) + var(--ae)) * -1deg))rotate(calc(var(--angle) * -1));}.d{--s:130px;--pt:polygon(9.2%25 0, 89.8%25 0, 68.2%25 13%25, 31.8%25 13%25);--ps:polygon(26%25 33%25, 26%25 76%25, -0.4%25 98.4%25, 0 94%25, 0 1.6%25);--pc:polygon(26.6%25 0, 73.4%25 0, 92%25 50%25, 73.4%25 100%25, 26.6%25 100%25, 8%25 50%25);--m:0;color:rgba(40,40,40,0.859);position:relative;width:var(--s);height:calc(var(--s) * 1.5831818182);display:inline-block}.d,.d div{border-radius:calc(var(--s) * 0.1066);overflow:hidden}.d::before,.d::after{content:\"\";clip-path:var(--pt)}.d::before,.d::after,.d div,.d div::before,.d div::after{position:absolute;left:0;top:0;width:100%25;height:100%25;display:block}.d::before,.d::after,.d .a,.d div::before,.d div::after{background:currentColor}.d .a{top:50%25;height:13%25;transform:translateY(-50%25);clip-path:var(--pc)}.d .b {height:50%25}.d .b::before,.d .b::after{content: \"\";clip-path: var(--ps)}.d .b::after{transform:rotateY(180deg)}.d .c,.d::after{transform:rotateX(180deg)}.d .c{transform-origin:0 100%25}.d::before{opacity:var(--A,1)}.e::after{opacity:var(--B,1)}.c::after{opacity:var(--C,1)}.d::after{opacity:var(--D,1)}.c::before{opacity:var(--E,1)}.e::before{opacity:var(--F,1)}.a{opacity:var(--G, 1)}.d0{--G:var(--m)}.d1{--m:0;--A:var(--m);--D:var(--m);--E:var(--m);--F:var(--m);--G:var(--m);margin-left:calc(var(--s) * -0.742)}.d2,.d3,.d7{--F:var(--m)}.d3,.d4,.d5,.d7,.d9{--E:var(--m)}.d2{--C:var(--m)}.d4{--A:var(--m);--D:var(--m)}.d5,.d6{--B: var(--m)}.d7{--D:var(--m);--G:var(--m)}.s > .d:not(:last-of-type){margin-right:calc(var(--s) * 0.16)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 520 520' width='520px' height='520px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='c-i'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i{color: rgba(40,40,40,1);--diameter:10px;--offset-bottom:13%25;--offset-bottom-text:12.5%25;--offset-center:18.78%25;--offset-center-text:18.28%25;background-image:radial-gradient(circle at center,currentColor calc((var(--diameter) * 0.5) - 1px),transparent calc(var(--diameter) * 0.5)),radial-gradient(circle at center,currentColor calc((var(--diameter) * 0.5) - 1px),transparent calc(var(--diameter) * 0.5));background-position:left calc(50%25 + var(--offset-center)) bottom var(--offset-bottom),left calc(50%25 - var(--offset-center)) bottom var(--offset-bottom);background-size:var(--diameter) var(--diameter);background-repeat:no-repeat;opacity:0.9;}.c-i::before,.c-i::after{position:absolute;left:calc(50%25 + (var(--sgn, 1) * var(--offset-center-text)));bottom:var(--offset-bottom-text);transform:translate(-50%25,100%25);font-size:18.2px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;}.c-i::before{--sgn:-1;content:'min'}.c-i::after {content:'max'}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 5260 5260' width='5260px' height='5260px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E<div class=\"c-i\" style=\"--n:100\"><div class='tick' style='--i:0'></div><div class='tick' style='--i:1'></div><div class='tick' style='--i:2'></div><div class='tick' style='--i:3'></div><div class='tick' style='--i:4'></div><div class='tick' style='--i:5'></div><div class='tick' style='--i:6'></div><div class='tick' style='--i:7'></div><div class='tick' style='--i:8'></div><div class='tick' style='--i:9'></div><div class='tick' style='--i:10'></div><div class='tick' style='--i:11'></div><div class='tick' style='--i:12'></div><div class='tick' style='--i:13'></div><div class='tick' style='--i:14'></div><div class='tick' style='--i:15'></div><div class='tick' style='--i:16'></div><div class='tick' style='--i:17'></div><div class='tick' style='--i:18'></div><div class='tick' style='--i:19'></div><div class='tick' style='--i:20'></div><div class='tick' style='--i:21'></div><div class='tick' style='--i:22'></div><div class='tick' style='--i:23'></div><div class='tick' style='--i:24'></div><div class='tick' style='--i:25'></div><div class='tick' style='--i:26'></div><div class='tick' style='--i:27'></div><div class='tick' style='--i:28'></div><div class='tick' style='--i:29'></div><div class='tick' style='--i:30'></div><div class='tick' style='--i:31'></div><div class='tick' style='--i:32'></div><div class='tick' style='--i:33'></div><div class='tick' style='--i:34'></div><div class='tick' style='--i:35'></div><div class='tick' style='--i:36'></div><div class='tick' style='--i:37'></div><div class='tick' style='--i:38'></div><div class='tick' style='--i:39'></div><div class='tick' style='--i:40'></div><div class='tick' style='--i:41'></div><div class='tick' style='--i:42'></div><div class='tick' style='--i:43'></div><div class='tick' style='--i:44'></div><div class='tick' style='--i:45'></div><div class='tick' style='--i:46'></div><div class='tick' style='--i:47'></div><div class='tick' style='--i:48'></div><div class='tick' style='--i:49'></div><div class='tick' style='--i:50'></div><div class='tick' style='--i:51'></div><div class='tick' style='--i:52'></div><div class='tick' style='--i:53'></div><div class='tick' style='--i:54'></div><div class='tick' style='--i:55'></div><div class='tick' style='--i:56'></div><div class='tick' style='--i:57'></div><div class='tick' style='--i:58'></div><div class='tick' style='--i:59'></div><div class='tick' style='--i:60'></div><div class='tick' style='--i:61'></div><div class='tick' style='--i:62'></div><div class='tick' style='--i:63'></div><div class='tick' style='--i:64'></div><div class='tick' style='--i:65'></div><div class='tick' style='--i:66'></div><div class='tick' style='--i:67'></div><div class='tick' style='--i:68'></div><div class='tick' style='--i:69'></div><div class='tick' style='--i:70'></div><div class='tick' style='--i:71'></div><div class='tick' style='--i:72'></div><div class='tick' style='--i:73'></div><div class='tick' style='--i:74'></div><div class='tick' style='--i:75'></div><div class='tick' style='--i:76'></div><div class='tick' style='--i:77'></div><div class='tick' style='--i:78'></div><div class='tick' style='--i:79'></div><div class='tick' style='--i:80'></div><div class='tick' style='--i:81'></div><div class='tick' style='--i:82'></div><div class='tick' style='--i:83'></div><div class='tick' style='--i:84'></div><div class='tick' style='--i:85'></div><div class='tick' style='--i:86'></div><div class='tick' style='--i:87'></div><div class='tick' style='--i:88'></div><div class='tick' style='--i:89'></div><div class='tick' style='--i:90'></div><div class='tick' style='--i:91'></div><div class='tick' style='--i:92'></div><div class='tick' style='--i:93'></div><div class='tick' style='--i:94'></div><div class='tick' style='--i:95'></div><div class='tick' style='--i:96'></div><div class='tick' style='--i:97'></div><div class='tick' style='--i:98'></div><div class='tick' style='--i:99'></div><div class='tick' style='--i:100'></div></div>%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.tick{--angle:calc((250 / var(--n)) * var(--i) * 1deg);position:absolute;left:50%25;top:50%25;width:80px;height:30px;background:rgba(161,161,161,1);border-radius:100px;transform:translate(-50%25,-50%25) rotate(90deg) rotate(55deg) rotate(var(--angle)) translateX(calc(\a 		5260 * (38.5931 / 100) * 1px\a 	)) translate(50%25);opacity:0.73}.tick:nth-child(10n + 1){background:rgba(88,86,86,1);width:100px;opacity:0.83}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E");
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  visibility: hidden;
  -webkit-animation: appear steps(2) 20ms calc(var(--drag-duration) * 2) forwards;
          animation: appear steps(2) 20ms calc(var(--drag-duration) * 2) forwards;
  --outline-color: rgba(0, 100, 200, 0.5);
  --outline-width: 3em;
  --drag-duration: 500ms;
  --drag-timing-func: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --knob-shadow: rgba(0, 0, 0, 0.6);
  --knob-face-gradient: linear-gradient(#f1f1f1, #fff);
  --knob-border-gradient: linear-gradient(#fff 34%, #d1d1d1);
}
.knob, .knob::-webkit-slider-runnable-track, .knob::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background-color: #0000;
}
.knob::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
}
.knob, .knob::-webkit-slider-runnable-track {
  pointer-events: none;
}
.knob, .knob::-moz-range-track, .knob::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  position: relative;
  border: 0;
  background-color: #0000;
}
.knob::-moz-range-progress {
  -moz-appearance: none;
       appearance: none;
  display: none;
}
.knob::-moz-range-track {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.knob::-webkit-slider-thumb {
  width: calc(var(--knob-pseudo-size) * 1em);
  height: calc(var(--knob-pseudo-size) * 1em);
  box-sizing: border-box;
  padding: calc(var(--knob-border-width) / var(--knob-scale));
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--knob-shadow);
  outline: solid var(--outline-color);
  outline-width: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class=\"c-i\"%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i{border-radius:50px;background:rgba(40,40,40,1)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"), var(--knob-face-gradient), var(--knob-border-gradient);
  background-size: var(--knob-tip-size) var(--knob-tip-size), 100% 100%, 100% 100%;
  background-position: left 50% bottom 10%, 0 0, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box, content-box, border-box;
  background-origin: content-box, border-box, border-box;
  transition-duration: 100ms, 50ms, var(--drag-duration);
  transition-timing-function: ease-out, ease-out, var(--drag-timing-func);
  pointer-events: auto;
  cursor: var(--cur-drag);
  left: var(--translate, 0);
  top: var(--center, 0);
  transform: rotate(calc(var(--start-angle, 0) * 1deg)) rotate(var(--current-angle, 0)) scale(var(--knob-scale));
  -webkit-transition-property: box-shadow, outline, transform;
  transition-property: box-shadow, outline, transform;
}
.knob::-moz-range-thumb {
  width: calc(var(--knob-pseudo-size) * 1em);
  height: calc(var(--knob-pseudo-size) * 1em);
  box-sizing: border-box;
  padding: calc(var(--knob-border-width) / var(--knob-scale));
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--knob-shadow);
  outline: solid var(--outline-color);
  outline-width: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv class='c-o' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class=\"c-i\"%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c-o,.c-i{position:absolute;left:0;top:0;right:0;bottom:0}.c-i{border-radius:50px;background:rgba(40,40,40,1)}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E"), var(--knob-face-gradient), var(--knob-border-gradient);
  background-size: var(--knob-tip-size) var(--knob-tip-size), 100% 100%, 100% 100%;
  background-position: left 50% bottom 10%, 0 0, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box, content-box, border-box;
  background-origin: content-box, border-box, border-box;
  transition-duration: 100ms, 50ms, var(--drag-duration);
  transition-timing-function: ease-out, ease-out, var(--drag-timing-func);
  pointer-events: auto;
  cursor: var(--cur-drag);
  translate: var(--translate, 0) 0;
  scale: var(--knob-scale);
  rotate: calc((var(--start-angle, 0) * 1deg) + var(--current-angle, 0));
  -moz-transition-property: box-shadow, outline, rotate;
  transition-property: box-shadow, outline, rotate;
}
.knob:hover::-moz-range-thumb {
  box-shadow: 0 0 7em 0 var(--knob-shadow);
}
.knob:hover::-webkit-slider-thumb {
  box-shadow: 0 0 7em 0 var(--knob-shadow);
}
.knob:active {
  cursor: var(--cur-dragging);
}
.knob::-moz-range-thumb:active {
  cursor: var(--cur-dragging);
}
.knob::-webkit-slider-thumb:active {
  cursor: var(--cur-dragging);
}
.knob:focus-visible {
  outline: none;
}
.knob:focus-visible::-moz-range-thumb {
  outline-width: var(--outline-width);
}
.knob:focus-visible::-webkit-slider-thumb {
  outline-width: var(--outline-width);
}

html,
body {
  height: 100%;
}

html {
  background: #e8e8e8;
}

body {
  display: grid;
  place-items: center;
  overscroll-behavior-y: contain;
}

* {
  padding: 0;
  margin: 0;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg