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