css实现逼真质感带刻度的圆形拖动旋转取值器开关温度调节器效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现逼真质感带刻度的圆形拖动旋转取值器开关温度调节器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @charset "UTF-8";
       
        @-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'&g.........完整代码请登录后点击上方下载按钮下载查看