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(0,0,0,0.02)" />
  </linearGradient>
  <mask id="m1">
    <circle r="18" fill="#fff"/>
  </mask>
  <circle class="bg" r="13" cy="10.5" fill="rgb(50,50,50)" />
  <path id="s1" class="stick" stroke-width="15" stroke="#ccc" stroke-linecap="round" d="M0,9 L0,0"/>
  <circle class="ball shadow" fill="url(#g3)" r="18" cy="20" />
  <g class="ball" mask="url(#m1)">
    <circle r="18" fill="url(#g2)"/>
    <circle class="highlight" r="16" cy="-4" fill="url(#g1)" />
  </g>
  <circle class.........完整代码请登录后点击上方下载按钮下载查看