js+css实现炫酷声音音量调节旋钮效果代码-html代码-BFW代码库

js+css实现炫酷声音音量调节旋钮效果代码

代码语言：html

代码描述：js+css实现炫酷声音音量调节旋钮效果代码，点击拖动旋钮调节音量。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          background-color: #161a20;
          color: white;
          display: grid;
          place-items: center;
          min-height: 100vh;
        }
        
        main {
          width: 50vw;
        }
        
        .volume-button-knob {
          position: relative;
        }
        .volume-button-knob svg {
          display: block;
          width: 100%;
        }
        
        .circle {
          fill: #202528;
          stroke: #080516;
          stroke-width: 10px;
        }
        
        .slider-wrap {
          filter: url(#inset-shadow);
        }
        
        .slider {
          --deg: 0deg;
          --h: 270;
          --s: 60%;
          transform-origin: 50% 50%;
          transform: rotate(var(--deg));
          fill: rgba(255, 255, 255, 0.5);
          cursor: grab;
          transition: all 0.1s ease-in-out;
          fill: hsl(var(--h), var(--s), 55%);
        }
        
        .volume-button-knob.without-animate .slider {
          transition: unset;
          cursor: grabbing;
        }
        
        .gradate line {
          --deg: 0deg;
          --h: 135;
          --s: 10%;
          --a: 0.2;
          stroke-linecap: round;
          stroke-width: 10px;
          stroke: hsla(var(--h), var(--s), 55%, var(--a));
          transform: rotate(var(--deg));
          transform-origin: 50% 50%;
        }
        .gradate line:hover, .gradate line.active {
          --a: 1;
          --s: 60%;
          filter: url(#shadow);
        }
    </style>



</head>

<body>
    <main>
        <input type="range" min="-135" max="135" step="13.5" id="inputRange">
        <div class="volume-button-knob">
            <svg viewBox="0 0 600 600">
			<defs>
				<radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.5" gradientUnits="objectBoundingBox">
					<stop offset="0" stop-color="#202528" />
					<stop offset="0.849" stop-color="#272c2f" />
					<stop offset="0.866" stop-color="#6a6d6f" />
					<stop offset="0.87" stop-color="#202528" />
					<stop offset="0.879" stop-color="#6a6d6f" />
					<stop offset="0.908" stop-color="#202528" />
					<stop offset="1" stop-color="#6a6d6f" />
				</radialGradient>
				<filter id="shadow" filterUnits="userSpaceOnUse">
					<feOffset input="SourceAlpha" />
					<feGaussianBlur stdDeviation="5" result="blur" />
					<feFlood result="color" />
					<feComposite operator="in" in="blur" />
					<feComposite in="SourceGraphic" />
				</filter>
				<filter id="inset-shadow">
					<feOffset input="SourceAlpha" />
					<feGaussianBlur stdDeviation="3" result="blur" />
					<feFlood result="color" />
					<feComposite operator="out" in="SourceGraphic" in2="blur" />
					<feComposite operator="in" in="color" />
					<feComposite operator="in" in2="SourceGraphic" />
				</filter>
			</defs>
			<circle class="circle" cx="300" cy="300" r="200" />
			<g id="gradate" class="gradate"></g>
			<circle id="slider" class="slider" cx="300" cy="130" r="10" />
			<g class="slider-wrap">
				<circle id="slider-shadow" class="slider" cx="300" cy="130" r="10" />
			</g>

		</svg>

        </div>
    </main>


    <scri.........完整代码请登录后点击上方下载按钮下载查看