TweenMax+svg+Draggable实现拖拽刻度试管温度滑块效果代码-html代码-BFW代码库

TweenMax+svg+Draggable实现拖拽刻度试管温度滑块效果代码

代码语言：html

所属分类：拖放

代码描述：TweenMax+svg+Draggable实现拖拽刻度试管温度滑块效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="https://use.typekit.net/rid3oni.css">

<meta name="viewport" content="width=device-width, initial-scale=1">

  
  
<style>
body {
 background-color: #FCEFD6;
 overflow: hidden;
 text-align:center;
}
body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

svg {
 
 width: 100%;
 height: 100%;
 
}

.label{
 fill:#FFFCF9;
 font-size:1.8em;
 font-family: "din-condensed-web", sans-serif;
 /* font-family: "filson-soft", sans-serif; */
 text-anchor:middle;
 letter-spacing:1.2px;
}


 .tubeLabel{
 fill:#FCEFD6;
 font-size:1.4em;
 font-family: "din-condensed-web", sans-serif;
 /* font-family: "filson-soft", sans-serif; */
 text-anchor:middle;
}
.dragger{
 -webkit-tap-highlight-color:transparent;
}
</style>



</head>

<body >
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
  <defs>
    <linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#FF0909"/>
      <stop offset="0.2" stop-color="#F3481A"/>
      <stop offset="0.5" stop-color="#FABA2C"/>
      <stop offset="1" stop-color="#00BCF2"/>
    </linearGradient>
<rect id="tube" x="357" y="150" width="86" height="400" rx="43" ry="43"/>   
    <clipPath id="liquidMask">
        <use xlink:href="#tube" class="liquidMask" />
    </clipPath>
   <clipPath id="tubeMask">
        <use xlink:href="#tube" class="liquidMask" />
    </clipPath>
   <path id="liquid" d="M757,552v490H357V552c50,0,50,20,100,20s50-20,100-20,50,20,100,20S707,552,757,552Z" />
<mask id="gradMask">   

      <use xlink:href="#liquid" class="liquid" x="0" fill="#FCEFD6" />
      <use xlink:href="#liquid" class="liquid" x="0" fill="#EEE" opacity="0.7"/>
 
    </mask>
  </defs>
  
  
    <g class="whole" transform="translate(0, -40)">

           <use xlink:href="#tube" class="tubeBg" fill="#C8D9D3" opacity="0.61"/>
   
      <g class="dragger" transform="translate(-6, 0)">
        <circle cx="294" cy="540" r="36" fill="#3A3335"/>
        <path class="dragTip" d="M315.5,556.76,299.24,540.5l16.26-16.26,36.26,16.26Z" fill="#3A3335"/>
        <text class="label" x="294" y="551">100</text>
<!--  <path id="dragShine" d="M330,540c-26,2-18-44-72,0a36,36,0,0,1,72,0Z" fill="#E9E9E9" opacity="0.052"/>    -->    
      </g>       
     
    
 <g mask="url(#gradMask)">
        <use xlink:href="#tube" fill="url(#liquidGrad)" />
  </g>
  <line class="tubeShine" x1="371" y1="200" x2="371" y2="443" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" opacity="0.21" stroke-dasharray="153 30" stroke-dashoffset="-20"/>
 <!--        <text class="tubeLabel" x="400" y="180">100°</text>
        <text class="tubeLabel" x="400" y="356">50°</text>
        <text class="tubeLabel" x="400" y="540">0°</text> -->
      <g class="measurements" fill="none" stroke="#FCEFD6" stroke-width="3" stroke-linecap="round" opacity="1">
        <line x1="358" y1="196" x2="370" y2="196" />
        <line x1="358".........完整代码请登录后点击上方下载按钮下载查看