css+js实现跟随鼠标移动三维原子核时钟走动显示时间动画效果
代码语言：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"><span>19</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(-184px) rotateX(90deg) rotateY(315deg)">
<div class="block__front block-border"><span>20</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(-131px) translateY(-226px) rotateX(90deg) rotateY(330deg)">
<div class="block__front block-border"><span>21</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(-252px) rotateX(90deg) rotateY(345deg)">
<div class="block__front block-border"><span>22</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(-1px) translateY(-260px) rotateX(90deg) rotateY(360deg)">
<div class="block__front block-border"><span>23</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>
<div class="weel weel--min" style="animation-name: rot_1_; z-index: 2">
<div class="block" style="transform: translateX(0px) translateY(-250px) 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(26px) translateY(-249px) rotateX(90deg) rotateY(6deg)">
<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(51px) translateY(-245px) rotateX(90deg) rotateY(12deg)">
<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(77px) translateY(-238px) rotateX(90deg) rotateY(18deg)">
<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(101px) translateY(-229px) rotateX(90deg) rotateY(24deg)">
<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(124px) translateY(-217px) rotateX(90deg) rotateY(30deg)">
<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(146px) translateY(-203px) rotateX(90deg) rotateY(36deg)">
<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(167px) translateY(-186px) rotateX(90deg) rotateY(42deg)">
<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(185px) translateY(-168px) rotateX(90deg) rotateY(48deg)">
<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(202px) translateY(-147px) rotateX(90deg) rotateY(54deg)">
<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(216px) translateY(-126px) rotateX(90deg) rotateY(60deg)">
<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(228px) translateY(-102px) rotateX(90deg) rotateY(66deg)">
<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(237px) translateY(-78px) rotateX(90deg) rotateY(72deg)">
<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(244px) translateY(-52px) rotateX(90deg) rotateY(78deg)">
<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(248px) translateY(-27px) rotateX(90deg) rotateY(84deg)">
<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(250px) translateY(-1px) rotateX(90deg) rotateY(90deg)">
<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(248px) translateY(26px) rotateX(90deg) rotateY(96deg)">
<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(244px) translateY(51px) rotateX(90deg) rotateY(102deg)">
<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(237px) translateY(77px) rotateX(90deg) rotateY(108deg)">
<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(228px) translateY(101px) rotateX(90deg) rotateY(114deg)">
<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(216px) translateY(124px) rotateX(90deg) rotateY(120deg)">
<div class="block__front block-border"><span>19</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(202px) translateY(146px) rotateX(90deg) rotateY(126deg)">
<div class="block__front block-border"><span>20</span></div>
<div class="block__back block-border"></div>
<div class=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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