js实现顺时针逆时针时钟动画效果代码-html代码-BFW代码库

js实现顺时针逆时针时钟动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现顺时针逆时针时钟动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0;
  background: #000;
}

svg {
  display: block;
  margin: calc(50vh - 50vmin) auto;
  min-width: 15em;
  min-height: 15em;
  width: 100vmin;
  height: 100vmin;
  max-width: 100em;
  max-height: 100em;
  font-size: 1em;
}

* {
  vector-effect: non-scaling-stroke;
}

[id*='mark'] {
  stroke: #eee;
}

[id='mark--major'] {
  stroke-width: 7;
}

[id='mark--minor'] {
  stroke-width: 2;
}

[id='ticks'] text {
  dominant-baseline: middle;
  text-anchor: middle;
  font: 20px verdana, sans-serif;
  fill: #aaa;
}
[id='ticks'] .quad {
  font: 700 28px verdana, sans-serif;
  fill: #eee;
}

.hand--h, .hand--m {
  stroke: #eee;
  stroke-linecap: round;
}
.hand--h line:nth-child(2), .hand--m line:nth-child(2) {
  stroke: #4ca454;
  stroke-width: 3;
}
.hand--h {
  stroke-width: 7;
}
.hand--m {
  stroke-width: 5;
}
.hand--s {
  stroke: #be4c39;
}
.hand--s line {
  stroke-width: 2;
}
.hand--s circle {
  fill: #e18728;
}
.hand--s circle:nth-of-type(2) {
  fill: #e0a197;
}

[id='arc'] {
  fill: transparent;
  stroke: #4ca454;
  stroke-width: 4;
  stroke-linecap: round;
}

[id='vertex'] {
  fill: #4ca454;
}

.counterclockwise [id='vertex'].........完整代码请登录后点击上方下载按钮下载查看