简约时钟特效 html+css+js
一. 先看效果（实时显示当前时间）：
二. 实现（最后面有完整代码）：
1. 定义盒子，.clock是整个钟，.hour是时针，min是分针，sec是秒针。
<div class="clock">
<div class="hour">div>
<div class="min">div>
<div class="sec">div>
div>
2. 给钟添加基本样式，宽高等等：
.clock{
width: 400px;
height: 400px;
background-image: url(clock.png);
background-size: 100% 100%;
box-shadow: inset 0 0px 10px 6px rgba(255, 255, 255, 0.5),
0 0px 25px rgba(255, 255, 255, 0.5);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
position: relative;
}
时钟的数字背景图片点我去获取~
box-shadow: inset 0 0px 10px 6px rgba(255, 255, 255, 0.5),
0 0px 25px rgba(255, 255, 255, 0.5); 阴影，可以按照自己喜好设置。
backdrop-filter: blur(15px); 可以让时钟这个元素的后面区域模糊。
position: relative; 相对定位，因为那些分针等要绝对定位；
3. 用伪类给时钟外边再加一层圆圈，主要为了美观，可省略或者修改：
.clock::before{
content: '';
position: absolute;
top: -30px;
left: -30px;
bottom: -30px;
right: -30px;
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0px 25px rgba(53, 52, 52, 0.5),
0 0px 10px rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
4. 继续用伪类为时钟添加中间那个小圆点：
.clock::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%,-50%);
background-color: rgb(255, 255, 255);
border-radius: 50%;
z-index: 3;
border: 2px solid rgb(79, 146, 96);
}
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 以上这三句可以让圆点居中对齐。
border-radius: 50%; 设置角的弧度。
z-index: 3; 在最外层显示，数值要比时分秒针大；
5. 设置时针样式，绝对定位
.hour{
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 170px;
background-image: linear-gradient(360deg,transparent 50%,rgb(255, 153, 0) 50%);
transform: translate(-50%,-50%);
border-radius: 8px;
transform-origin: center ;
}
background-image: linear-gradient(360deg,transparent 50%,rgb(255, 153, 0) 50%); 利用背景图片渐变色，让整个盒子前50%显示transparent透明色，后50%显示蓝色。这样相当于一半被隐藏掉了。
transform-origin: center ; 设置旋转的基点，center就是时针中心位置；
6.同样的操作，设置分针：
.min{
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 250px;
background-image: linear-gradient(360deg,transparent 50%,rgb(0, 183, 255) 50%);
transform: translate(-50%,-50%) ;
border-radius: 5px;
z-index: 1;
transform-origin: center ;
}
z-index: 1; 要打过时针；
7. 设置秒针：
.sec{
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 300px;
background-image: linear-gradient(360deg,transparent 30%,rgb(237, 243, 235) 30%);
transform: translate(-50%,-50%);
border-radius: 3px;
z-index: 2;
transform-origin: center ;
}
background-image: linear-gradient(360deg,transparent 30%,rgb(237, 243, 235) 30%);因为秒针后面要露出来一点，所以只让30%变透明隐藏掉。
z-index: 2; 大过时针，分针，小过中心小白点。
- js部分
var hour = document.querySelector('.hour');
var min = document.querySelector('.min');
var sec = document.querySelector('.sec');
window.setInterval(function(){
let shijian = new Date();
let shi = shijian.getHours()*30;
let fen = shijian.getMinutes()*6;
let miao = shijian.getSeconds()*6;
hour.style.transform = `translate(-50%,-50%) rotateZ(${
shi+shijian.getMinutes()*0.5}deg)`;
min.style.transform = `translate(-50%,-50%) rotateZ(${
fen}deg)`;
sec.style.transform = `translate(-50%,-50%) rotateZ(${
miao}deg)`;
},1000)
let shijian = new Date();能够返回当前的实时时间；
shijian.getHours() 返回小时（24小时制）；
shijian.getMinutes() 返回分钟；
shijian.getSeconds() 返回秒数；
然后就是根据得到时分秒，让时，分，秒针旋转相应的角度，通过定时器1秒更新1次；
一圈有 360deg，12个小数，60分钟，60秒钟；
因为小时返回24小时制的，所以算24小时会转720deg，一小时就是30deg；
分针的话一分钟360/60=5deg；
秒针的话一秒钟360/60=5deg；
还有，时针虽然没到下一个小时，但会根据分钟而慢慢移动，60分钟移动30deg，所以一分钟30/60=0.5deg；
三.完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(45deg, rgb(255, 166, 0) 50% ,rgb(0, 204, 255) 50% );
}
body::after{
content: '';
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, rgb(110, 224, 125) 50% , transparent 50%);
z-index: -1;
}
.clock{
width: 400px;
height: 400px;
background-image: url(clock.png);
background-size: 100% 100%;
box-shadow: inset 0 0px 10px 6px rgba(255, 255, 255, 0.5),
0 0px 25px rgba(255, 255, 255, 0.5);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
position: relative;
}
.clock::before{
content: '';
position: absolute;
top: -30px;
left: -30px;
bottom: -30px;
right: -30px;
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0px 25px rgba(53, 52, 52, 0.5),
0 0px 10px rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.clock::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%,-50%);
background-color: rgb(255, 255, 255);
border-radius: 50%;
z-index: 3;
border: 2px solid rgb(79, 146, 96);
}
.hour{
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 170px;
background-image: linear-gradient(360deg,transparent 50%,rgb(255, 153, 0) 50%);
transform: translate(-50%,-50%);
border-radius: 8px;
transform-origin: center ;
}
.min{
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 250px;
background-image: linear-gradient(360deg,transparent 50%,rgb(0, 183, 255) 50%);
transform: translate(-50%,-50%) ;
border-radius: 5px;
z-index: 1;
transform-origin: center ;
}
.sec{
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 300px;
background-image: linear-gradient(360deg,transparent 30%,rgb(237, 243, 235) 30%);
transform: translate(-50%,-50%);
border-radius: 3px;
z-index: 2;
transform-origin: center ;
}
style>
head>
<body>
<div class="clock">
<div class="hour">div>
<div class="min">div>
<div class="sec">div>
div>
<script>
var hour = document.querySelector('.hour');
var min = document.querySelector('.min');
var sec = document.querySelector('.sec');
window.setInterval(function(){
let shijian = new Date();
let shi = shijian.getHours()*30;
let fen = shijian.getMinutes()*6;
let miao = shijian.getSeconds()*6;
hour.style.transform = `translate(-50%,-50%) rotateZ(${
shi+shijian.getMinutes()*0.5}deg)`;
min.style.transform = `translate(-50%,-50%) rotateZ(${
fen}deg)`;
sec.style.transform = `translate(-50%,-50%) rotateZ(${
miao}deg)`;
},1000)
/* alert(shijian.getHours()); */
/* alert(shijian.getMinutes()); */
/* alert(shijian.getSeconds()); */
script>
body>
html>
总结：
其它文章~：
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
是啊，我也喜欢。温柔，温暖，以及寻找着互相吸引的东西，努力活下去的心，很喜欢。—夏目友人帐
