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

代码语言:html

所属分类:拖放

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

代码标签: 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&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0