TweenMax实现曲线滚动滑块选择器效果代码-html代码-BFW代码库

TweenMax实现曲线滚动滑块选择器效果代码

代码语言：html

所属分类：选择器

代码描述：TweenMax实现曲线滚动滑块选择器效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'>

  
<style>
body{
  background-color: #222;
  text-align: center;
  overflow:hidden;
}


#textS{ 
  color:#000;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Oswald', tahoma; font-size:40vw;
  text-align:center; white-space: nowrap;
  opacity:0.2;
}

svg{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}


#DiacoDesignLink,#pens{
  color: #fff;
}
</style>



</head>

<body >
  <span id="textS">GSAP</span>



<svg width="320px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="path1" d="M10 80 Q 150 0 300 80" stroke="gray" stroke-dasharray="5,5" fill="transparent"/>
<path id="path2" d="M10 80 Q 150 0 300 80" stroke-width="7" stroke="#7CFC00" fill="transparent" stroke-linecap="round"/>
<circle class="knob" r="25" fill="#88CE02" stroke-width="4" stroke="#111"/>
</svg>
<script type="text/javas.........完整代码请登录后点击上方下载按钮下载查看