gsap+svg实现Joy stick摇杆点击拖拽控制效果代码-html代码-BFW代码库

gsap+svg实现Joy stick摇杆点击拖拽控制效果代码

代码语言：html

所属分类：拖放

代码描述：gsap+svg实现Joy stick摇杆点击拖拽控制效果代码

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

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

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


  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

html, body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: 'Roboto', sans-serif;
  font-size:3vw;
  color:#fff;
  background:linear-gradient(#eee, #ccc);
  flex-direction:column;
}

.knob {
  width:80%;
  height:80%;
  max-width:500px;
  touch-action: none;
}

.hit {
  cursor:pointer;
}

@media (max-width: 600px) {
  html, body {
    font-size:18px;
  }
}
</style>


  
</head>

<body>
  <svg class="knob" viewBox="-50 -50 100 100">
  <linearGradient id="g1" gradientTransform="rotate(90)">
    <stop offset="0" stop-color="rgba(255,255,255,0.35)" />
    <stop offset="1" stop-color="rgba(255,250,250,0)" />
  </linearGradient>
  <linearGradient id="g2" gradientTransform="rotate(90)">
    <stop offset="0" stop-color="rgb(250,0,50)" />
    <stop offset="1" stop-color="rgb(172,0,10)" />
  </linearGradient>
  <linearGradient id="g3" gradientTransform="rotate(90)">
    <stop offset="0" stop-color="rgba(0,0,0,0.1)" />
    <stop offset="1" stop-color="rgba.........完整代码请登录后点击上方下载按钮下载查看