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