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" />
                </.........完整代码请登录后点击上方下载按钮下载查看