css+js实现跟随鼠标移动三维原子核时钟走动显示时间动画效果-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css+js实现跟随鼠标移动三维原子核时钟走动显示时间动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  perspective: 1600px;
  transform-style: preserve-3d;
}

body {
  overflow: hidden;
  background-color: #E3F2FD;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.title {
  position: absolute;
  transform-origin: 50% 50%;
  transform: rotateZ(-90deg) translateX(-90px) translateY(-30px);
  font-size: 2em;
  font-family: monospace;
  color: #FF3D00;
  font-weight: 600;
}

.block-border {
  border: 1px solid #999;
}

.clock-container {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50% 50%;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(-38.5deg) rotateZ(60.8deg);
}

.block {
  transform-origin: 10.5px 8.4px 3.5px;
  position: absolute;
  left: calc(50% - 10.5px);
  top: calc(50% - 8.4px);
  transform-style: preserve-3d;
}
.block__front, .block__back {
  width: 21px;
  height: 16.8px;
  position: absolute;
  background-color: #1E88E5;
}
.block__front span, .block__back span {
  font-size: 0.8em;
  position: absolute;
  left: 7px;
  top: 1px;
  transform: rotate(90deg);
  color: #fff;
  font-family: monospace;
}
.block__back {
  transform: translateZ(-7px);
  background-color: #1E88E5;
}
.block__top, .block__bottom {
  position: absolute;
  width: 21px;
  height: 7px;
  background-color: #1E88E5;
  transform: rotateX(90deg) translateY(-3.5px) translateZ(3.5px);
}
.block__bottom {
  transform: rotateX(90deg) translateY(-3.5px) translateZ(-13.3px);
  background-color: #1E88E5;
}
.block__left, .block__right {
  position: absolute;
  width: 7px;
  height: 16.8px;
  background-color: #1E88E5;
  transform: rotateY(90deg) translateX(3.5px) translateZ(-3.5px);
}
.block__right {
  background-color: #1E88E5;
  transform: rotateY(-90deg) translateX(-3.5px) translateZ(-17.5px);
}

.weel {
  position: absolute;
  backface-visibility: visible;
  width: 100%;
  height: 100%;
  animation-iteration-count: infinite;
  animation-duration: 26s;
  animation-timing-function: linear;
  transform-origin: 50% 50% 50%;
  transform-style: preserve-3d;
  transition: 0.3s ease;
}

@keyframes rot {
  0% {
    transform: rotateX(120deg) rotateY(-20deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(120deg) rotateY(-20deg) rotateZ(-360deg);
  }
}
@keyframes rot_1 {
  0% {
    transform: rotateX(120deg) rotateY(33deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(120deg) rotateY(33deg) rotateZ(-360deg);
  }
}
@keyframes rot_2 {
  0% {
    transform: rotateX(120deg) rotateY(86deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(120deg) rotateY(86deg) rotateZ(-360deg);
  }
}
/* --- dial --- */
.clock-dial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50% 50%;
  transform: rotateX(5deg) rotateY(-10.5deg) rotateZ(0deg);
  z-index: 20;
  backface-visibility: visible;
  transform-style: preserve-3d;
}
.clock-dial__container {
  padding: 2em;
  border: 1px solid #1E88E5;
  border-radius: 3px;
  background-color: rgba(30, 136, 229, 0.7);
  transform: translateX(-50%) translateY(-50%) translateZ(300px);
}
.clock-dial__section,
.clock-dial span {
  display: inline-block;
  font-size: 2em;
  font-family: monospace;
  color: #fff;
  text-shadow: 1px 1px 10px #fff;
}
</style>



</head>

<body >
  <div class="title">move mouse</div>
<div class="clock-container">
  <div class="weel weel--hour" style="animation-name: rot_; z-index: 1">
    <div class="block" style="transform: translateX(0px) translateY(-260px) rotateX(90deg) rotateY(0deg)">
      <div class="block__front block-border"><span>-1</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(67px) translateY(-252px) rotateX(90deg) rotateY(15deg)">
      <div class="block__front block-border"><span>0</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(129px) translateY(-226px) rotateX(90deg) rotateY(30deg)">
      <div class="block__front block-border"><span>1</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(183px) translateY(-184px) rotateX(90deg) rotateY(45deg)">
      <div class="block__front block-border"><span>2</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(225px) translateY(-131px) rotateX(90deg) rotateY(60deg)">
      <div class="block__front block-border"><span>3</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(251px) translateY(-68px) rotateX(90deg) rotateY(75deg)">
      <div class="block__front block-border"><span>4</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(260px) translateY(-1px) rotateX(90deg) rotateY(90deg)">
      <div class="block__front block-border"><span>5</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(251px) translateY(67px) rotateX(90deg) rotateY(105deg)">
      <div class="block__front block-border"><span>6</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(225px) translateY(129px) rotateX(90deg) rotateY(120deg)">
      <div class="block__front block-border"><span>7</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(183px) translateY(183px) rotateX(90deg) rotateY(135deg)">
      <div class="block__front block-border"><span>8</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(130px) translateY(225px) rotateX(90deg) rotateY(150deg)">
      <div class="block__front block-border"><span>9</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(67px) translateY(251px) rotateX(90deg) rotateY(165deg)">
      <div class="block__front block-border"><span>10</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(0px) translateY(260px) rotateX(90deg) rotateY(180deg)">
      <div class="block__front block-border"><span>11</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-68px) translateY(251px) rotateX(90deg) rotateY(195deg)">
      <div class="block__front block-border"><span>12</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-130px) translateY(225px) rotateX(90deg) rotateY(210deg)">
      <div class="block__front block-border"><span>13</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-184px) translateY(183px) rotateX(90deg) rotateY(225deg)">
      <div class="block__front block-border"><span>14</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-226px) translateY(130px) rotateX(90deg) rotateY(240deg)">
      <div class="block__front block-border"><span>15</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-252px) translateY(67px) rotateX(90deg) rotateY(255deg)">
      <div class="block__front block-border"><span>16</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-260px) translateY(0px) rotateX(90deg) rotateY(270deg)">
      <div class="block__front block-border"><span>17</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-252px) translateY(-68px) rotateX(90deg) rotateY(285deg)">
      <div class="block__front block-border"><span>18</span></div>
      <div class="block__back block-border"></div>
      <div class="block__top block-border"></div>
      <div class="block__bottom block-border"></div>
      <div class="block__left block-border"></div>
      <div class="block__right block-border"></div>
    </div>
    <div class="block" style="transform: translateX(-226px) translateY(-130px) rotateX(90deg) rotateY(300deg)">
      <div class="block__front block-border"><.........完整代码请登录后点击上方下载按钮下载查看