这篇博客通过CSS和HTML展示了一个简单的方法来创建一个时钟，包括秒针、分针和时针的实现，并使用了CSS的transform属性进行旋转和定位，同时添加了小时和分钟刻度。示例代码中还包含了一段简单的JavaScript来动态添加分钟刻度。
简单的运用css+html写一个时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clock {
width: 200px;
height: 200px;
border: 5px solid red;
/* 圆角 */
border-radius: 50%;
/* 相对定位 */
position: relative;
}
/* 秒针 */
.second {
height: 70px;
width: 1px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center bottom;
/* 每秒6度 10s就是60度 */
transform: translate(-50%, -100%) rotate(60deg);
}
/* 分针 */
.minute {
height: 50px;
width: 2px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center bottom;
/* (4分 + 1/6分) * 6deg （10s相当于1/6分钟 */
transform: translate(-50%, -100%) rotate(calc(24deg + 6deg * (10 / 60)));
}
/* 时针 */
.hour {
height: 50px;
width: 4px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center bottom;
/* 180deg + 30deg*((4 + 1/6)/60) */
transform: translate(-50%, -100%) rotate(calc(180deg + 30deg * ((4 + 1 / 6) / 60)));
}
/* 水平垂直居中 定位的固定写法 */
.num,
.hour-tick,
.minute-tick {
position: absolute;
最低0.47元/天 解锁文章
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
