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