TweenMax+svg+Draggable实现拖拽刻度设置闹钟时间效果代码-html代码-BFW代码库

TweenMax+svg+Draggable实现拖拽刻度设置闹钟时间效果代码

代码语言：html

所属分类：拖放

代码描述：TweenMax+svg+Draggable实现拖拽刻度设置闹钟时间效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
 background-color: #212121;
 overflow: hidden;
 text-align: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 position: absolute;
 width: 100%;
 height: 100%;
 visibility: hidden;
 transform: translate(-50%, 0%);
}

.timeLabel,
.meridianLabel,
.bellBtnLabel,
.digitalTimeLabel {
 font-family: 'din-condensed-web', sans-serif;
 text-anchor: middle;
 fill: #7e7e7e;
 font-size: 40px;
}

.nextDayBtn,
.prevDayBtn {
 cursor: pointer;
 font-size: 21px;
}

.bellBtn text,
.nextDayBtn text,
.prevDayBtn text {
 font-size: 21px;
 fill: #D6DADD;
}

.meridianLabel {
 font-size: 72px;
 fill: #D6DADD;
}

.timeLabelGroup {
 cursor: pointer;
}

.timeLabelBtn .timeLabelGroup {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bellBtn {
 cursor: pointer;
}

text {
 user-select: none;
 -webkit-user-select: none;
}
</style>
  <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">
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="alarmSVG" viewBox="0 0 320 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
<path id="bell" d="M18.3,18.7h-6.2c-0.2,1.2-1.4,2.1-3,2.1c-1.6,0-2.8-0.9-3-2.1H0v-2.7c2.1-1.1,2.6-2.7,2.7-3.6c0,0,0-4,0-4.3
  c0-3.1,2.2-5.7,5.1-6.3V1.4C7.8,0.6,8.4,0,9.2,0c0.8,0,1.4,0.6,1.4,1.4V2c2.7,0.6,4.8,2.9,5,5.7l0,4.9c0.1,0.9,0.6,2.4,2.8,3.5V18.7
  z"/>  
  <g class="timeLabelGroup">
  <text class="timeLabel"/>
   <rect class="timeLabelBtn" width="40" height="40" y="-30" x="-15" fill="transparent"/>
   </g>

  </defs>

 <line opacity="1" class="dottedLine" x1="50%" x2="50%" y1="369" y2="450" stroke-dasharray="6 6" stroke="#7e7e7e"/>

 <g class="maskedTimeScale" >
  
 <g class="timeScaleGroup"> 

 <rect class="timeScaleHit" width="2880" x="160" height="160" y="400" fill="transparent"/>
  <.........完整代码请登录后点击上方下载按钮下载查看