Draggable+TweenMax实现智能家居灯光声音温度旋钮拖动控制面板代码-html代码-BFW代码库

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"/>
                <cir.........完整代码请登录后点击上方下载按钮下载查看