gsap+svg实现可拖动的旋钮调节器效果代码-html代码-BFW代码库

gsap+svg实现可拖动的旋钮调节器效果代码

代码语言：html

所属分类：拖放

代码描述：gsap+svg实现可拖动的旋钮调节器效果代码，适合风力调节或温度档位调节。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
body {
 background-color: #dfdfdf;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}
:root {
	--ui-grey: #d9d9d9;
	--ui-green: #1DD1A1;
	--ui-amber: #FECA57;
	--ui-red: #FF6B6B;
	--ui-shadow: #697683;
	--ui-shadow-glow: #1DD1A1;
}
body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}
.dialTooth {
	cursor: pointer;
}
#robotArm, #robotMaskShine{ 
pointer-events: none;
}
</style>

  
</head>

<body>
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

	<defs>
    <radialGradient id="robotMaskGrad" cx="400" cy="300" fx="400" fy="277.61" r="130.72" gradientUnits="userSpaceOnUse">
      <stop offset=".88" stop-color="#f0f0f0"/>
     
      <stop offset=".99" stop-color="#000"/>
    </radialGradient>
		<circle class="dialTooth" cx="277" cy="419" r="4" fill="var(--ui-grey)" />
<!-- 		<filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
			<feGaussianBlur stdDeviation="24" result="coloredBlur" />
			<feOffset dx="0" dy="-20" result="offsetblur"></feOffset>
			<feFlood id="glowAlpha" flood-color="var(--ui-shadow-glow)" flood-opacity="0.23"></feFlood>
			<feComposite in2="offsetblur" operator="in"></feComposite>
			<feMerge>
				<feMergeNode />
				<feMergeNode in="SourceGraphic"></feMergeNode>
			</feMerge>
		</filter>	 -->	
		<filter id="dropShadow" x="-100%" y="-100%" width="250%" height="250%">
			<feGaussianBlur stdDeviation="12 16" result="coloredBlur" />
			<feOffset dx="0" dy="20" result="offsetblur"></feOffset>
			<feFlood id="glowAlpha" flood-color="var(--ui-shadow)" flood-opacity="0.18"></feFlood>
			<feComposite in2="offsetblur" operator="in"></feComposite>
			<feMerge>
				<feMergeNode />
				<feMergeNode in="SourceGraphic"></feMergeNode>
			</feMerge>
		</filter>
		<radialGradient id="dialBody" cx="400" cy="316" fx="400" fy="316" r="145.43" gradientUnits="userSpaceOnUse">
			<stop offset=".78" stop-color="#f1f1f1" />
			<stop offset="0.95" stop-color="#fff" />
		</radialGradient>
		<radialGradient id="dialBody-2" cx="400" cy="279" fx="400" fy="279" r="145.43" gradientUnits="userSpaceOnUse">
			<stop offset=".78" stop-color="#f0f0f0" stop-opacity="0" />

			<stop offset=".96" stop-color="#e5e5e5" />
		</radialGradient>
		<filter id='innerShadow'>
			<!-- Shadow offset -->
			<feOffset dx='0' dy='1' />

			<!-- Shadow blur -->
			<feGaussianBlur stdDeviation='1' result='offset-blur' />

			<!-- Invert drop shadow to make an inset shadow -->
			<feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' />

			<!-- Cut color inside shadow -->
			<feFlood flood-color='black' flood-opacity='0.15' result='color' />
			<feComposite operator='in' in='color' in2='inverse' result='shadow' />

			<!-- Placing shadow over element -->
			<feComposite operator='over' in='shadow' in2='SourceGraphic' />
		</filter>
	</defs>

	<g filter="url(#dropShadow)">
		<g id="dialBodyGroup">
			<circle id="dialBodyShine" cx="400" cy="300" r="130.76" fill="url(#dialBody)" />
			<circle id="dial.........完整代码请登录后点击上方下载按钮下载查看