Draggable+TweenMax实现智能家居灯光声音温度旋钮拖动控制面板代码
代码语言：html
所属分类：拖放
代码描述：Draggable+TweenMax实现智能家居灯光声音温度旋钮拖动控制面板代码
代码标签： Draggable TweenMax 智能 家居 灯光 声音 温度 旋钮 拖动 控制 面板 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://use.typekit.net/rid3oni.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #fffcf9;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
text,
tspan {
font-family: "din-condensed-web", sans-serif;
user-select: none;
-webkit-user-select: none;
text-anchor: middle;
}
#dialMarkerContainer,
#centerGroup {
pointer-events: none;
}
#dropLabel {
letter-spacing: -2px;
font-size: 56px;
}
#centerLabel,
#centerValue {
letter-spacing: -6px;
font-size: 132px
}
#centerLabel tspan {
letter-spacing: -2px;
font-size: 52px;
}
text {
text-anchor: middle;
}
.icon {
cursor: pointer;
stroke: rgba(0, 0, 0, 0);
stroke-width: 20;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#iconLabel0 tspan,
#iconLabel1 tspan {
font-size: 23px;
}
#iconLabel2 tspan {
font-size: 23px;
}
.selectionLabel {
font-family: "filson-soft", sans-serif;
font-weight: 700;
font-size: 28px;
}
#powerBtnHit{
cursor:pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#powerBtn{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop" x="-100%" y="-100%" width="250%" height="250%">
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
<feOffset dx="0" dy="6" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#212121" flood-opacity="0.13"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<line id="dialMarker" fill="none" stroke="#D6DADD" stroke-width="1" stroke-dasharray="0" stroke-miterlimit="10" x1="400" y1="0" x2="400" y2="14"/>
<g id="dialLabelGroup">
<text x="400" id="dialLabel" class="dialLabel" font-size="18">.</text>
</g>
<clipPath id="iconMask">
<rect class="iconMask" x="308.54" y="225.26" width="190.92" height="50.24" fill="#ffa0a5"/>
</clipPath>
</defs>
<g id="dialMarkerContainer">
<circle id="dialArc" cx="400" cy="356" r="206" fill="none" stroke-width="2" stroke="#D6DADD"/>
</g>
<g id="dialContainer">
<line id="dialLine" x1="400" x2="400" y1="185" y2="122" stroke-width="3" stroke="#FFF" opacity="1"/>
<circle id="hit" cx="400" cy="356" r="260" fill="transparent" stroke="#FFF" stroke-width="0"/>
<circle id="dial" cx="400" cy="356" r="170" fill="#F6F7F9" stroke-width="3" stroke-dasharray="6" opacity="1" stroke="#D6DADD"/>
</g>
<g id="centerGroup" opacity="1">
<circle id="dialCenterOutline" cx="400" cy="376" r="30" fill="#FFF" stroke="#D6DADD" opacity="0"/>
<circle id="dialCenter" cx="400" cy="356" r="30" stroke="#FFF" stroke-width="6" opacity="0"/>
<clipPath id="centerLabelMask">
<use class="centerLabelMask" xlink:href="#dialCenter"/>
</clipPath>
<g>
<!-- clip-path="url(#centerLabelMask)"> -->
<g id="centerLabelGroup">
<text id="centerLabel" transform="translate(404, 403)" fill="#F6F7F9">--</text>
</g>
</g>
<text id="selectionLabel" font-size="28" x="402" y="440" class="selectionLabel" fill="#F6F7F9">--</text>
</g>
<g id="paginatorGroup" opacity="1">
<circle id="page0" cx="379" cy="486" r="4" fill="#F6F7F9"/>
<circle id="page1" cx="393" cy="486" r="4" fill="#F6F7F9"/>
<circle id="page2" cx="407" cy="486" r="4" fill="#F6F7F9"/>
<circle id="page3" cx="421" cy="486" r="4" fill="#F6F7F9"/>
</g>
<g clip-path="url(#iconMask)">
<g id="iconGroup">
<path id="lightIcon" icon-data="0" class="icon" d="M336.24,241.65a9.26,9.26,0,1,0,9.26,9.26A9.26,9.26,0,0,0,336.24,241.65Zm0,15.44a6.17,6.17,0,1,1,6.17-6.17A6.18,6.18,0,0,1,336.24,257.09Zm17-4.63h-3.09a1.54,1.54,0,1,1,0-3.09h3.09A1.54,1.54,0,1,1,353.21,252.46Zm-6.06-10.27A1.54,1.54,0,0,1,345,240l2.18-2.18a1.54,1.54,0,1,1,2.18,2.18Zm-10.92-3.62a1.54,1.54,0,0,1-1.54-1.54v-3.09a1.54,1.54,0,0,1,3.09,0V237A1.55,1.55,0,0,1,336.24,238.57Zm-10.92,3.62L323.14,240a1.54,1.54,0,0,1,2.18-2.18L327.5,240A1.54,1.54,0,1,1,325.32,242.18Zm-1.43,8.73a1.54,1.54,0,0,1-1.54,1.54h-3.09a1.54,1.54,0,0,1,0-3.09h3.09A1.54,1.54,0,0,1,323.89,250.92Zm1.43,8.73a1.54,1.54,0,1,1,2.18,2.18L325.32,264a1.54,1.54,0,0,1-2.18-2.18Zm10.92,3.62a1.54,1.54,0,0,1,1.54,1.54v3.09a1.54,1.54,0,0,1-3.09,0v-3.09A1.54,1.54,0,0,1,336.24,263.26Zm10.92-3.62,2.18,2.18a1.54,1.54,0,1,1-2.18,2.18L345,261.83A1.54,1.54,0,0,1,347.15,259.65Z" fill="#d6dadd">
<title>LIGHTING</title>
</path>
<path id="volumeIcon" icon-data="1" class="icon" d="M410.85,238.27a1.27,1.27,0,0,0-.28,2.42,11.44,11.44,0,0,1,0,20.42,1.27,1.27,0,1,0,1.11,2.26,14,14,0,0,0,0-25,1.27,1.27,0,0,0-.72-0.16h-0.12Zm-3,4.93a1.27,1.27,0,0,0-.52,2.38,6.06,6.06,0,0,1,0,10.69,1.27,1.27,0,1,0,1.18,2.25l0.17-.11a8.62,8.62,0,0,0,0-15,1.27,1.27,0,0,0-.72-0.2h-0.12Zm-6.19,24.22a3.23,3.23,0,0,1-2.24-1l-0.05-.06-6.84-7.74h-4.89A2.58,2.58,0,0,1,385,256V245.82a2.58,2.58,0,0,1,2.58-2.58h4.89l6.94-7.84a3.15,3.15,0,0,1,2.19-1h0a2.33,2.33,0,0,1,1.73.7,2.92,2.92,0,0,1,.81,2.15v27.06a3,3,0,0,1-1.64,2.91A2.32,2.32,0,0,1,401.64,267.41Zm-0.37-2.87a1.52,1.52,0,0,0,.24.19,1.48,1.48,0,0,0,0-.41V237.27a1,1,0,0,0,0-.22,0.85,0.85,0,0,0-.23.16l-7.63,8.63h-6.07l0,10.14,6,0ZM401.64,237h0Z" fill="#d6dadd">
<title>VOLUME</title>
</path>
<path id="airconIcon" icon-data="2" class="icon" d="M468.1,266.93a1.33,1.33,0,0,1-1.31-1.35v-1.15a0.5,0.5,0,0,0-.74-0.44,1.36,1.36,0,0,1-1.63-2.13l2.22-2.22a0.5,0.5,0,0,0,.15-0.35v-5.15a0.5,0.5,0,0,0-.5-0.5,0.5,0.5,0,0,0-.25.07l-4.52,2.57a0.5,0.5,0,0,0-.23.3l-0.86,3a1.37,1.37,0,0,1-1.35,1.31H459a1.34,1.34,0,0,1-1.21-1.46,0.5,0.5,0,0,0-.5-0.55,0.5,0.5,0,0,0-.26.07l-0.86.51a1.34,1.34,0,0,1-1.33-2.34l0.87-.52a0.5,0.5,0,0,0,0-.86,1.33,1.33,0,0,1,.5-2.45h0.16a1.37,1.37,0,0,1,.37.05l3.11,0.75h0.12a0.5,0.5,0,0,0,.25-0.07l4.52-2.63a0.5,0.5,0,0,0,0-.86l-4.52-2.63a0.5,0.5,0,0,0-.25-0.07h-0.12l-3.09.74a1.55,1.55,0,0,1-.6.13,1.33,1.33,0,0,1-.52-2.56,0.5,0.5,0,0,0,0-.9l-0.86-.46a1.33,1.33,0,0,1,.46-2.49l0.21,0a1.34,1.34,0,0,1,.67.18l1,0.57a0.5,0.5,0,0,0,.75-0.41,1.33,1.33,0,0,1,1-1.25l0.27,0a1.32,1.32,0,0,1,1.25,1l0.86,3a0.5,0.5,0,0,0,.23.29l4.52,2.63a0.5,0.5,0,0,0,.25.07,0.5,0.5,0,0,0,.5-0.5v-5.21a0.5,0.5,0,0,0-.15-0.35L464.41,240a1.33,1.33,0,0,1,.65-2.3l0.23-.06a1.38,1.38,0,0,1,.73.21,0.5,0.5,0,0,0,.77-0.42v-1.14a1.34,1.34,0,0,1,1-1.34l0.21-.05h0.08a1.34,1.34,0,0,1,1.33,1.38v1.16a0.5,0.5,0,0,0,.74.44,1.36,1.36,0,0,1,1.63,2.13l-2.22,2.22a0.5,0.5,0,0,0-.15.35v5.15a0.5,0.5,0,0,0,.5.5,0.5,0.5,0,0,0,.25-0.07l4.52-2.57a0.5,0.5,0,0,0,.23-0.3l0.86-3a1.33,1.33,0,0,1,1-1l0.27,0a1.32,1.32,0,0,1,1.3,1.29,0.5,0.5,0,0,0,.26.42,0.49,0.49,0,0,0,.24.06,0.5,0.5,0,0,0,.25-0.07l1-.57a1.34,1.34,0,0,1,.46-0.17l0.22-.07H481a1.33,1.33,0,0,1,.52,2.56l-0.92.55a0.5,0.5,0,0,0,0,.85,1.33,1.33,0,0,1-1,2.41l-3.09-.74H476.3a0.5,0.5,0,0,0-.25.07l-4.52,2.63a0.5,0.5,0,0,0,0,.86L476,254a0.5,0.5,0,0,0,.25.07h0.12l3.09-.74,0.18-.06,0.22,0h0.18a1.34,1.34,0,0,1,.57,2.55,0.5,0.5,0,0,0,0,.89l0.8,0.46a1.34,1.34,0,1,1-1.33,2.33l-0.85-.51a0.5,0.5,0,0,0-.52,0,0.5,0.5,0,0,0-.23.47,1.34,1.34,0,0,1-1.21,1.46h-0.13a1.33,1.33,0,0,1-1.33-1.21l-0.88-3.07a0.5,0.5,0,0,0-.23-0.3l-4.52-2.57a0.5,0.5,0,0,0-.5,0,0.5,0.5,0,0,0-.25.43v5.15a0.5,0.5,0,0,0,.15.35l2.23,2.23a1.36,1.36,0,0,1-1,2.28,1.34,1.34,0,0,1-.64-0.16,0.5,0.5,0,0,0-.74.44v1.14a1.35,1.35,0,0,1-1.33,1.36h0Z" fill="#d6dadd">
<title>AIR TEMPERATURE</title>
</path>
<path id="fanIcon" icon-data="3" class="icon" d="M541.88,267.3a4.89,4.89,0,0,1-4-2.08,4.73,4.73,0,0,1-.13-5.08,4.3,4.3,0,0,0,.47-1.31,11.15,11.15,0,0,1-2.12,3.5,6.33,6.33,0,0,1-8.22,1.42,9.49,9.49,0,0,1-4.46-6.9,4.9,4.9,0,0,1,2-4.71,4.73,4.73,0,0,1,5.08-.13,4.3,4.3,0,0,0,1.31.47,11.12,11.12,0,0,1-3.5-2.12,6.33,6.33,0,0,1-1.42-8.22,9.49,9.49,0,0,1,6.9-4.46,4.9,4.9,0,0,1,4.71,2,4.73,4.73,0,0,1,.13,5.08,4.29,4.29,0,0,0-.47,1.32,11.13,11.13,0,0,1,2.12-3.5,6.33,6.33,0,0,1,8.22-1.42,9.49,9.49,0,0,1,4.46,6.9,4.9,4.9,0,0,1-2,4.71,4.73,4.73,0,0,1-5.08.13,4.3,4.3,0,0,0-1.31-.47,11.14,11.14,0,0,1,3.5,2.12,6.33,6.33,0,0,1,1.42,8.22,9.49,9.49,0,0,1-6.9,4.46A4.88,4.88,0,0,1,541.88,267.3Zm-3.58-13a2,2,0,0,1,1.83,1.31,6.93,6.93,0,0,1-.41,5.66,2.41,2.41,0,0,0,0,2.67,2.6,2.6,0,0,0,2.51,1.07,7.35,7.35,0,0,0,5.21-3.26,4.06,4.06,0,0,0-.95-5.49,8.26,8.26,0,0,0-4.69-2.09,1.81,1.81,0,0,1-1.79-1.52,2,2,0,0,1,1.3-2.12h0a6.92,6.92,0,0,1,5.66.41,2.41,2.41,0,0,0,2.67,0,2.6,2.6,0,0,0,1.07-2.51,7.34,7.34,0,0,0-3.26-5.21,4.06,4.06,0,0,0-5.49.95,8.27,8.27,0,0,0-2.09,4.7,1.81,1.81,0,0,1-1.53,1.79,2,2,0,0,1-2.11-1.3,6.93,6.93,0,0,1,.41-5.65,2.41,2.41,0,0,0,0-2.68,2.6,2.6,0,0,0-2.51-1.07,7.35,7.35,0,0,0-5.21,3.26,4.06,4.06,0,0,0,.95,5.49,8.25,8.25,0,0,0,4.69,2.09,1.81,1.81,0,0,1,1.79,1.53,2,2,0,0,1-1.3,2.11,6.93,6.93,0,0,1-5.66-.41,2.41,2.41,0,0,0-2.67,0,2.6,2.6,0,0,0-1.07,2.51,7.35,7.35,0,0,0,3.26,5.21,4.06,4.06,0,0,0,5.49-.95,8.26,8.26,0,0,0,2.09-4.69A1.81,1.81,0,0,1,538,254.3Zm3.79-1.62h0Z" fill="#d6dadd">
<title>FAN SPEED</title>
</path>
</g>
</g>
<g id="powerBtn" filter="url(#drop)">
</path><circle fill="#F8F9FB" stroke="#D6DADD" stroke-width="3" stroke-miterlimit="10" cx="400" cy="356" r="51.5"/>
<path fill="none" stroke="#3CC269" stroke-width="4" stroke-li.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0