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; 大过时针,分针,小过中心小白点。
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;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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总结笔记
是啊,我也喜欢。温柔,温暖,以及寻找着互相吸引的东西,努力活下去的心,很喜欢。—夏目友人帐
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态