svg+js实现圆环时钟显示时间走动效果代码
代码语言：html
所属分类：布局界面
代码描述：svg+js实现圆环时钟显示时间走动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: #3553ba;
}
svg {
max-height: 90vh;
max-width: 90vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body >
<svg viewBox="0 0 100 100">
<g transform="scale(-1 1) rotate(-90 0 100)">
<g fill="none" stroke="rgba(0,0,0,0.1)">
<circle cx="50" cy="50" r="46" stroke-width="8" />
<circle cx="50" cy="50" r="46" stroke-width="6" />
<circle cx="50" cy="50" r="38" stroke-width="7" />
<circle cx="50" cy="50" r="38" stroke-width="5" />
<circle cx="50" cy="50" r="30" stroke-width="6" />
<circle cx="50" cy="50" r="30" stroke-width="4" />
<circle cx="50" cy="50" r="22" stroke-width="5" />
<circle cx="50" cy="50" r="22" stroke-width="3" />
<circle cx="50" cy="50" r="16" stroke-width="4" />
<circle cx="50" cy="50" r="16" stroke-width="2" />
</g>
<g id="timeHere">
<!-- time circles pasted here -->
</g>
</g>
<g font-weight="600" fill="#3553BA">
<g font-size="5" style="font-family: 'Roboto', sans-serif" dominant-baseline="middle" text-anchor="middle">
<g transform="rotate(15 50 50)">
<text x="50" y="4.5">1</text>
</g>
<g transform="rotate(30 50 50)">
<text x="50" y="4.5">2</text>
</g>
<g transform="rotate(45 50 50)">
<text x="50" y="4.5">3</text>
</g>
<g transform="rotate(60 50 50)">
<text x="50" y="4.5">4</text>
</g>
<g transform="rotate(75 50 50)">
<text x="50" y="4.5">5</text>
</g>
<g transform="rotate(90 50 50)">
<text x="50" y="4.5">6</text>
</g>
<g transform="rotate(105 50 50)">
<text x="50" y="4.5">7</text>
</g>
<g transform="rotate(120 50 50)">
<text x="50" y="4.5">8</text>
</g>
<g transform="rotate(135 50 50)">
<text x="50" y="4.5">9</text>
</g>
<g transform="rotate(150 50 50)">
<text x="50" y="4.5">10</text>
</g>
<g transform="rotate(165 50 50)">
<text x="50" y="4.5">11</text>
</g>
<g transform="rotate(180 50 50)">
<text x="50" y="4.5">12</text>
</g>
<g transform="rotate(195 50 50)">
<text x="50" y="4.5">13</text>
</g>
<g transform="rotate(210 50 50)">
<text x="50" y="4.5">14</text>
</g>
<g transform="rotate(225 50 50)">
<text x="50" y="4.5">15</text>
</g>
<g transform="rotate(240 50 50)">
<text x="50" y="4.5">16</text>
</g>
<g transform="rotate(255 50 50)">
<text x="50" y="4.5">17</text>
</g>
<g transform="rotate(270 50 50)">
<text x="50" y="4.5">18</text>
</g>
<g transform="rotate(285 50 50)">
<text x="50" y="4.5">19</text>
</g>
<g transform="rotate(300 50 50)">
<text x="50" y="4.5">20</text>
</g>
<g transform="rotate(315 50 50)">
<text x="50" y="4.5" dominant-baseline="middle" text-anchor="middle">21</text>
</g>
<g transform="rotate(330 50 50)">
<text x="50" y="4.5">22</text>
</g>
<g transform="rotate(345 50 50)">
<text x="50" y="4.5">23</text>
</g>
<g transform="rotate(360 50 50)">
<text x="50" y="4.5">24</text>
</g>
</g>
<g font-size="5" font-family="Roboto" dominant-baseline="middle" text-anchor="middle">
<g transform="rotate(30 50 50)">
<text x="50" y="12.5">1</text>
</g>
<g transform="rotate(60 50 50)">
<text x="50" y="12.5">2</text>
</g>
<g transform="rotate(90 50 50)">
<text x="50" y="12.5">3</text>
</g>
<g transform="rotate(120 50 50)">
<text x="50" y="12.5">4</text>
</g>
<g transform="rotate(150 50 50)">
<text x="50" y="12.5">5</text>
</g>
<g transform="rotate(180 50 50)">
<text x="50" y="12.5">6</text>
</g>
<g transform="rotate(210 50 50)">
<text x="50" y="12.5">7</text>
</g>
<g transform="rotate(240 50 50)">
<text x="50" y="12.5">8</text>
</g>
<g transform="rotate(270 50 50)">
<text x="50" y="12.5">9</text>
</g>
<g transform="rotate(300 50 50)">
<text x="50" y="12.5">10</text>
</g>
<g transform="rotate(330 50 50)">
<text x="50" y="12.5">11</text>
</g>
<g transform="rotate(360 50 50)">
<text x="50" y="12.5">12</text>
</g>
</g>
<g font-size="2" font-family="Roboto" dominant-baseline="middle" text-anchor="middle">
<g transform="rotate(6 50 50)">
<text x="50" y="20.25">1</text>
</g>
<g transform="rotate(12 50 50)">
<text x="50" y="20.25">2</text>
</g>
<g transform="rotate(18 50 50)">
<text x="50" y="20.25">3</text>
</g>
<g transform="rotate(24 50 50)">
<text x="50" y="20.25">4</text>
</g>
<g transform="rotate(30 50 50)">
<text x="50" y="20.25">5</text>
</g>
<g transform="rotate(36 50 50)">
<text x="50" y="20.25">6</text>
</g>
<g transform="rotate(42 50 50)">
<text x="50" y="20.25">7</text>
</g>
<g transform="rotate(48 50 50)">
<text x="50" y="20.25">8</text>
</g>
<g transform="rotate(54 50 50)">
<text x="50" y="20.25">9</text>
</g>
<g transform="rotate(60 50 50)">
<text x="50" y="20.25">10</text>
</g>
<g transform="rotate(66 50 50)">
<text x="50" y="20.25">11</text>
</g>
<g transform="rotate(72 50 50)">
<text x="50" y="20.25">12</text>
</g>
<g transform="rotate(78 50 50)">
<text x="50" y="20.25">13</text>
</g>
<g transform="rotate(84 50 50)">
<text x="50" y="20.25">14</text>
</g>
<g transform="rotate(90 50 50)">
<text x="50" y="20.25">15</text>
</g>
<g transform="rotate(96 50 50)">
<text x="50" y="20.25">16</text>
</g>
<g transform="rotate(102 50 50)">
<text x="50" y="20.25">17</text>
</g>
<g transform="rotate(108 50 50)">
<text x="50" y="20.25">18</text>
</g>
<g transform="rotate(114 50 50)">
<text x="50" y="20.25">19</text>
</g>
<g transform="rotate(120 50 50)">
<text x="50" y="20.25">20</text>
</g>
<g transform="rotate(126 50 50)">
<text x="50" y="20.25">21</text>
</g>
<g transform="rotate(132 50 50)">
<text x="50" y="20.25">22</text>
</g>
<g transform="rotate(138 50 50)">
<text x="50" y="20.25">23</text>
</g>
<g transform="rotate(144 50 50)">
<text x="50" y="20.25">24</text>
</g>
<g transform="rotate(150 50 50)">
<text x="50" y="20.25">25</text>
</g>
<g transform="rotate(156 50 50)">
<text x="50" y="20.25">26</text>
</g>
<g transform="rotate(162 50 50)">
<text x="50" y="20.25">27</text>
</g>
<g transform="rotate(168 50 50)">
<text x="50" y="20.25">28</text>
</g>
<g transform="rotate(174 50 50)">
<text x="50" y="20.25">29</text>
</g>
<g transform="rotate(180 50 50)">
<text x="50" y="20.25">30</text>
</g>
<g transform="rotate(186 50 50)">
<text x="50" y="20.25">31</text>
</g>
<g transform="rotate(192 50 50)">
<text x="50" y="20.25">32</text>
</g>
<g transform="rotate(198 50 50)">
<text x="50" y="20.25">33</text>
</g>
<g transform="rotate(204 50 50)">
<text x="50" y="20.25">34</text>
</g>
<g transform="rotate(210 50 50)">
<text x="50" y="20.25">35</text>
</g>
<g transform="rotate(216 50 50)">
<text x="50" y="20.25">36</text>
</g>
<g transform="rotate(222 50 50)">
<text x="50" y="20.25">37</text>
</g>
<g transform="rotate(228 50 50)">
<text x="50" y="20.25">38</text>
</g>
<g transform="rotate(234 50 50)">
<text x="50" y="20.25">39</text>
</g>
<g transform="rotate(240 50 50)">
<text x="50" y="20.25">40</text>
</g>
<g transform="rotate(246 50 50)">
<text x="50" y="20.25">41</text>
</g>
<g transform="rotate(252 50 50)">
<text x="50" y="20.25">42</text>
</g>
<g transform="rotate(258 50 50)">
<text x="50" y="20.25">43</text>
</g>
<g transform="rotate(264 50 50)">
<text x="50" y="20.25">44</text>
</g>
<g transform="rotate(270 50 50)">
<text x="50" y="20.25">45</text>
</g>
<g transform="rotate(276 50 50)">
<text x="50" y="20.25">46</text>
</g>
<g transform="rotate(282 50 50)">
<text x="50" y="20.25">47</text>
</g>
<g transform="rotate(288 50 50)">
<text x="50" y="20.25">48</text>
</g>
<g transform="rotate(294 50 50)">
<text x="50" y="20.25">49</text>
</g>
<g transform="rotate(300 50 50)">
<text x="50" y="20.25">50</text>
</g>
<g transform="rotate(306 50 50)">
<text x="50" y="20.25">51</text>
</g>
<g transform="rotate(312 50 50)">
<text x="50" y="20.25">52</text>
</g>
<g transform="rotate(318 50 50)">
<text x="50" y="20.25">53</text>
</g>
<g transform="rotate(324 50 50)">
<text x="50" y="20.25">54</text>
</g>
<g transform="rotate(330 50 50)">
<text x="50" y="20.25">55</text>
</g>
<g transform="rotate(336 50 50)">
<text x="50" y="20.25">56</text>
</g>
<g transform="rotate(342 50 50)">
<text x="50" y="20.25">57</text>
</g>
<g transform="rotate(348 50 50)">
<text x="50" y=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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