纯css3制作简易钟表时钟

2024-07-12 14:33| 来源: 网络整理| 查看: 265

使用css3制作简易钟表

效果在这里插入图片描述 html代码

具体的思路就是外边是一个大的圆

.clock { width: 500px; height: 500px; /* border: 8px solid black; */ border-radius: 50%; position: relative; left: calc(50% - 250px); z-index: 25; }

中是一个小的圆点在中心

.center { width: 20px; height: 20px; border-radius: 50%; background-color: gray; position: absolute; left: calc(250px - 10px); top: calc(50% - 10px); z-index: 20; }

时针分针秒针都是使用细的长方形

.hour { width: 14px; height: 100px; background-color: black; position: absolute; left: calc(250px - 7px); top: calc(50% - 100px); z-index: 19; } .point { width: 10px; height: 140px; background-color: blue; position: absolute; left: calc(250px - 5px); top: calc(50% - 140px); z-index: 18; } .seconds { width: 8px; height: 180px; background-color: green; position: absolute; left: calc(250px - 4px); top: calc(50% - 180px); z-index: 17; animation: sec 5s linear 0s; transform-origin: bottom left; }

大的刻度用两个不同的长方形做成一个十字架的形状

.div1 { width: 8px; height: 500px; background-color: black; position: absolute; left: calc(250px - 4px); z-index: 15; } .div2 { width: 500px; height: 8px; background-color: black; position: absolute; top: calc(50% - 4px); z-index: 15; }

用一个小的白圆盖在这个十字架上使用z-index让圆覆盖在十字架上被时针分针秒针盖住

.p1 { width: 430px; height: 430px; background-color: white; border-radius: 50%; position: absolute; left: calc(250px - 215px); top: calc(50% - 215px); z-index: 16; }

剩下的10个中等刻度宽度比大刻度细一些，使用 transform: rotate();让他倾斜就可以一个格子30度

.div3 { width: 6px; height: 500px; background-color: black; position: absolute; left: calc(250px - 4px); z-index: 15; transform: rotate(30deg); } .div4 { width: 6px; height: 500px; background-color: black; position: absolute; left: calc(250px - 4px); z-index: 15; transform: rotate(60deg); } .div5 { width: 6px; height: 500px; background-color: black; position: absolute; left: calc(250px - 4px); z-index: 15; transform: rotate(120deg); } .div6 { width: 6px; height: 500px; background-color: black; position: absolute; left: calc(250px - 4px); z-index: 15; transform: rotate(150deg); }

剩下的小刻度方法差不多举个例子，让他转6度

.s1 { width: 4px; height: 500px; background-color: black; position: absolute; left: calc(250px - 2px); z-index: 12; transform: rotate(6deg); }

最后使用一个比覆盖十字架的大一些的大圆让他盖住小的柱子图层让他小于大刻度的图层

注意 1.使用z-index设置图层中心圆点 > 时针 > 分针 > 秒针 >大刻度遮罩层>12个大的刻度>小刻度的圆>小刻度 2.在定位的时候使用绝对定位top和left时，使用calc()可以让元素到达中心点比如 calc( 50% - 元素的宽或高 )减号左右一定要用空格分隔

表针转动

让表针转动可以使用

transform-origin: bottom center;

让旋转中心点到下部的中心点

倒计时五秒

@keyframes sec { 0% { transform: rotate(330deg); } 20% { transform: rotate(336deg); } 40% { transform: rotate(342deg); } 60% { transform: rotate(348deg); } 80% { transform: rotate(354deg); } 100% { transform: rotate(360deg); } }

获取当前时间要用到js所以只能从固定的点开始计时

【本文地址】

公司简介

联系我们