仿荣耀手机时钟，设计的同款时钟效果
Date内置对象获取当下的时间，通过处理呈现在页面上这一步获取时间是非常简单的，通过
Date下的一些属性就可以实现了
这部分的炫彩流光效果在之前的博客中有详细讲到
炫彩流光效果
通过定位将三根针重叠在一起，下端对齐都摆在原点，通过transfrom-origin属性，将旋转原点定为底部，也就是，让三根针转的时候绕中心点转
在获取到时间的基础上，将时间转化为旋转的角度，每一个小时时针转30度，每分钟分钟转6度，每秒钟秒针转6度
这里有一点点的计算，需要理解一下
'rotate(' + (rotateH + (rotateM / 60)) + 'deg' + ')'
就像这样把分针旋转了多少反馈给时针，60分钟一个小时，所以是除以60
clip-path属性采取另一半的圆，圆环的效果采用的是大小圆的思路，用小圆盖在大半圆的上方<!-- 转盘时钟 -->
<div class="clocker">
<span class="long"></span>
<span class="short"></span>
<span class="mini"></span>
<i class="twelve">12</i>
<i class="three">3</i>
<i class="six">6</i>
<i class="nine">9</i>
<div class="round"></div>
</div>
<!-- 旋转时钟 -->
<div class="rot">
<div class="timing"></div>
<div class="outer"></div>
<div class="inner"></div>
</div>
<!-- 显示日期 -->
<div class="date">
<p>中国标准时间</p>
<div class="now"></div>
</div>
<!-- 数字时钟 -->
<div class = "clock">
<span class ="hour"></span>
<span class ="minute"></span>
<span class ="second"></span>
</div>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
@keyframes move {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
/* 数字炫彩时钟 */
.clock {
display: flex;
position: relative;
width: 400px;
height: 100px;
margin: 20px auto;
background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));
background-size: 400%;
border-radius: 10px;
justify-content: center;
align-items: center;
animation: move 3s linear infinite alternate;
}
.clock::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 410px;
height: 110px;
background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));
background-size: 400%;
opacity: 1;
border-radius: 10px;
transition: all .6s;
z-index: -1;
filter: blur(10px);
animation: move 3s linear infinite alternate;
}
.clock span {
color: white;
font-size: 50px;
margin: 0px 30px;
text-shadow: 0px 0px 12px white;
}
/* 日期样式 */
.date {
width: 300px;
height: 100px;
margin: 0 auto;
}
p {
text-align: center;
letter-spacing: 4px;
color: white;
font-size: 34px;
}
.date .now {
color: white;
font-size: 20px;
margin-top: 10px;
letter-spacing: 3px;
text-align: center;
}
/* 表盘 */
.clocker {
/* display: none; */
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 50px auto;
background-color: rgb(179, 179, 179);
}
.clocker span {
display: inline-block;
position: absolute;
left: 50%;
transform-origin: bottom;
}
/* 三根针 */
.long {
top: 30px;
width: 4px;
height: 170px;
background: linear-gradient(rgb(39,122,218),rgb(226,20,233),pink);
background-size: 400%;
transform: translate(-2px,0);
}
.short {
position: relative;
top: 60px;
width: 8px;
height: 140px;
border-radius: 4px;
background-color: black;
transform: translate(-4px,0);
}
.short::before {
position: absolute;
bottom: 0;
left: 3px;
content: '';
width: 2px;
height: 60px;
background-color: white;
border-radius: 1px;
}
.mini {
position: relative;
top: 100px;
width: 10px;
height: 100px;
border-radius: 5px ;
background-color: black;
transform: translate(-3px,0);
}
.mini::before {
position: absolute;
bottom: 0;
left: 4px;
content: '';
width: 2px;
height: 40px;
background-color: white;
border-radius: 1px;
}
/* 中间的小圆圈 */
.round {
position: absolute;
width: 20px;
height: 20px;
border: px solid black;
/* background-color: white; */
background: linear-gradient(rgb(39,122,218),rgb
