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 {
  box-shadow: none;
  background-color: #0000;
}
.hour .num:before, .min .num:before, .sec .num:before {
  position: absolute;
  content: "";
  inset: 0;
  transform: translatez(-1vmin);
  backdrop-filter: blur(0.1em);
}

.half.tick {
  filter: hue-rotate(90deg);
}

.hour {
  --clr: hsl(189 100% 51%);
  --turn: 10deg;
  --z: 50vmin;
}

.min {
  --clr: hsl(89 100% 51%);
  --turn: 30deg;
  --z: 52.5vmin;
}

.sec {
  --clr: hsl(280 100% 71%);
  --turn: 50deg;
}

body {
  font-family: system-ui, sans-serif;
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: #1f2020;
  font-family: system-ui;
  perspective: 300em;
}
</style>

  
  
</head>

<body >
  <div class="clock">
  <div class="hour" style="--t:12">
<div class="num" style="--i:1">1</div>
<div class="num" style="--i:2">2</div>
<div class="num" style="--i:3">3</div>
<div class="num" style="--i:4">4</div>
<div class="num" style="--i:5">5</div>
<div class="num" style="--i:6">6</div>
<div class="num" style="--i:7">7</div>
<div class="num" style="--i:8">8</div>
<div class="num" style="--i:9">9</div>
<div class="num" style="--i:10">10</div>
<div class="num" style="--i:11">11</div>
<div class="num" style="--i:12">12</div>
  </div>
  <div class="min" style="--t:60">
<div class="num  half" style="--i:0">0</div>
<div class="num tick " style="--i:1">|</div>
<div class="num tick " style="--i:2">|</div>
<div class="num tick " style="--i:3">|</div>
<div class="num tick " style="--i:4">|</div>
<div class="num tick half" style="--i:5">|</div>
<div class="num tick " style="--i:6">|</div>
<div class="num tick " style="--i:7">|</div>
<div class="num tick " style="--i:8">|</div>
<div class="num tick " style="--i:9">|</div>
<div class="num  half" style="--i:10">10</div>
<div class="num tick " style="--i:11">|</div>
<div class="num tick " style="--i:12">|</div>
<div class="num tick " style="--i:13">|</div>
<div class="num tick " style="--i:14">|</div>
<div class="num tick half" style="--i:15">|</div>
<div class="num tick " style="--i:16">|</div>
<div class=&.........完整代码请登录后点击上方下载按钮下载查看