3D 数字时钟实现
效果展示
CSS / JavaScript 知识点
box-shadow 属性运用，实现 3D 效果的数字时钟transform 属性灵活运用，实现数值时钟上的数字部分JavaScript Date()对象的运用
页面整体布局
12
1
2
3
4
5
6
7
8
9
10
11
实现数字时钟外部盒子样式
.clock {
position: relative;
width: 450px;
height: 550px;
display: flex;
justify-content: center;
align-items: center;
background: #c9d5e0;
border-radius: 50px;
border-top-left-radius: 250px;
border-top-right-radius: 250px;
box-shadow: 45px 45px 45px -15px rgba(0, 0, 0, 0.15), inset 15px 15px 10px
rgba(255, 255, 255, 0.75), -15px -15px 35px rgba(255, 255, 255, 0.55), inset -2px -2px
15px rgba(0, 0, 0, 0.2);
}
实现上述代码后效果如下：
实现数字时钟上数字时钟仪表盘的基础样式
.numbers {
position: absolute;
top: 30px;
width: 390px;
height: 390px;
background: #152b4a;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 7px 7px 22px #152b4a66, inset 7px 7px 7px rgba(255, 255, 255, 0.55),
-9px -9px 15px rgba(255, 255, 255, 1);
}
/* 使用伪块实现时钟仪表盘上指针中心圆点 */
.numbers::before {
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #e91e63;
z-index: 100000;
box-shadow: 0 0 0 1px #e91e63, 0 0 0 3px #fff, 0 0 5px 5px rgba(0, 0, 0, 0.15);
}
.numbers span {
position: absolute;
inset: 15px;
text-align: center;
color: #fff;
font-size: 1.25em;
/* 使用 transform 属性让数字容器实现360度分散布局（360 / 12 = 30） */
transform: rotate(calc(30deg * var(--i)));
}
.numbers span b {
font-weight: 400;
display: inline-block;
/* 因数字容器做了角度旋转，所以数字要正常显示的话，也需要旋转对应的角度 */
transform: rotate(calc(-30deg * var(--i)));
}
实现数字时钟上指针的基础样式
.numbers .circle {
position: absolute;
width: 280px;
height: 280px;
border: 1px solid rgba(0, 0, 0, 0.75);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 10;
}
.numbers .circle i {
position: absolute;
width: 6px;
height: 50%;
background: var(--clr);
opacity: 0.75;
transform-origin: bottom;
transform: scaleY(0.5);
}
.numbers .circle#sec i {
width: 2px;
}
.numbers .circle#min i {
width: 4px;
}
.numbers .circle#min {
width: 230px;
height: 230px;
}
.numbers .circle#hrs {
width: 180px;
height: 180px;
}
.numbers .circle::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--clr);
top: -6px;
left: 50%;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
}
实现上述代码后效果如下：
实现数字时钟上数字仪表盘部分样式样式
#time {
position: absolute;
bottom: 35px;
display: flex;
padding: 10px 20px;
font-size: 2em;
font-weight: 600;
border-radius: 40px;
background: #152b4a;
/* 使用内部阴影和外部阴影实现3D仪表样式 */
box-shadow: 7px 7px 22px #152b4a66, inset 7px 7px 7px rgba(255, 255, 255, 0.55),
-9px -9px 15px rgba(255, 255, 255, 1);
}
#time div {
position: relative;
width: 60px;
text-align: center;
color: var(--clr);
opacity: 0.75;
}
#time div:last-child {
font-size: 0.5em;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
#time div:nth-child(1)::after,
#time div:nth-child(2)::after {
content: ":";
position: absolute;
right: -4px;
}
#time div:nth-child(2)::after {
/* 使用动画实现秒钟元素的闪缩 */
animation: animate 1s steps(1) infinite;
}
@keyframes animate {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
实现上述代码后效果如下：
使用 JavaScript 实现数字时钟运动效果
let hr = document.querySelector("#hrs");
let mn = document.querySelector("#min");
let sc = document.querySelector("#sec");
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6;
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
let hour = document.getElementById("hour");
let minute = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let ampm = document.getElementById("ampm");
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let am = h >= 12 ? "PM" : "AM";
if (h > 12) {
h = h - 12;
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
hour.innerHTML = h;
minute.innerHTML = m;
seconds.innerHTML = s;
ampm.innerHTML = am;
});
完整代码下载
完整代码下载
参考链接
您阅读本篇文章共花了：
发表评论