gsap+svg实现Joy stick摇杆点击拖拽控制效果代码
代码语言:html
所属分类:拖放
代码描述:gsap+svg实现Joy stick摇杆点击拖拽控制效果代码
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0