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" .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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