css+js实现手环旋转立体时钟显示时间代码-html代码-BFW代码库

css+js实现手环旋转立体时钟显示时间代码

代码语言：html

代码描述：css+js实现手环旋转立体时钟显示时间代码，时分秒是三给不同刻度的圆环，圆环转动时间走动。

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

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

<head>
  <meta charset="UTF-8">
  

 
  
  
  
<style>
div {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.clock {
  font-size: 2rem;
  display: grid;
  gap: 1.5em;
  rotate: 1 0 1 -35deg;
  position: relative;
}
.clock:before {
  content: "";
  position: absolute;
  background-color: #ff2b05;
  border-radius: 0.5em;
  width: 0.1em;
  height: 15rem;
  transform: translate(-0.35em, -1em) translateZ(40vmin) rotatex(25deg);
}

.hour, .min, .sec {
  --z: 55vmin;
  display: flex;
  position: relative;
  --clr: hsl(189 100% 51%);
  --clrs: color-mix(in lab, var(--clr), #fff5);
  transform: rotatey(calc( -1 * var(--turn)));
}
.hour .num, .min .num, .sec .num {
  position: absolute;
  padding: 0.3em;
  width: 2em;
  background-color: #1f202050;
  display: grid;
  place-content: center;
  color: var(--clr);
  box-shadow: 0 0 1vmin var(--clrs);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotatey(calc( var(--i) * 360deg / var(--t))) translateZ(var(--z)) rotatex(25deg);
  text-shadow: 0.05em 0.05em 0.3em var(--clrs), -0.05em 0.05em 0.3em var(--clrs), 0.05em -0.05em 0.3em var(--clrs), -0.05em -0.05em 0.3em var(--clrs);
}
.hour .num.tick, .min .num.tick, .sec .num.tick {
  b.........完整代码请登录后点击上方下载按钮下载查看