目录
全部代码
html部分
表盘
刻度css部分
时针
分针
秒
动画
中间的点
首先我将一个时钟分成了刻度(有12个)，时钟，分针，秒针，边框。
主要运用了animation这个动画。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{font-size: 12px;margin: 0px;padding: 0px;}#clock{width: 600px;height: 600px;border: 15px solid black;border-radius: 50%;position: absolute;left: 650px;top: 100px;box-shadow: 10px 10px 100px 10px black;background-color: #c2c4d3;}.kd{width: 9px;height: 290px;border-top: 10px solid black;left: 299px;position: absolute;transform-origin: bottom center;}#kd0{}#kd1{transform: rotate(30deg);}#kd2{transform: rotate(60deg);}#kd3{transform: rotate(90deg);}#kd4{transform: rotate(120deg);}#kd5{transform: rotate(150deg);}#kd6{transform: rotate(180deg);}#kd7{transform: rotate(210deg);}#kd8{transform: rotate(240deg);}#kd9{transform: rotate(270deg);}#kd10{transform: rotate(300deg);}#kd11{transform: rotate(330deg);}#hour{width: 10px;height: 150px;background: black;opacity: 1;left: 305px;top: 150px;position: absolute;transform-origin: bottom center;animation: rotate 720s linear infinite;}#minute{width: 5px;height: 200px;background: cadetblue;opacity: 1;left: 305px;top: 100px;position: absolute;transform-origin: bottom center;animation: rotate 360s linear infinite;}#second{width: 3px;height: 250px;background: red;opacity: 1;left: 305px;top: 50px;position: absolute;transform-origin: bottom center;animation: rotate 60s linear infinite;}@keyframes rotate {0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}}#point{width: 50px;height: 50px;border-radius: 50%;border:2px solid black;position: absolute;left: 281px;top: 270px;opacity: 0.5;}</style>
</head>
<body>
<div id="clock"><div id="kd0" class="kd">12</div><div id="kd1" class="kd">1</div><div id="kd2" class="kd">2</div><div id="kd3" class="kd">3</div><div id="kd4" class="kd">4</div><div id="kd5" class="kd">5</div><div id="kd6" class="kd">6</div><div id="kd7" class="kd">7</div><div id="kd8" class="kd">8</div><div id="kd9" class="kd">9</div><div id="kd10" class="kd">10</div><div id="kd11" class="kd">11</div><div id="hour"></div><div id="minute"></div><div id="second"></div><div id="point"></div>
</div>
</body>
</html><div id="clock"><div id="kd0" class="kd">12</div><div id="kd1" class="kd">1</div><div id="kd2" class="kd">2</div><div id="kd3" class="kd">3</div><div id="kd4" class="kd">4</div><div id="kd5" class="kd">5</div><div id="kd6" class="kd">6</div><div id="kd7" class="kd">7</div><div id="kd8" class="kd">8</div><div id="kd9" class="kd">9</div><div id="kd10" class="kd">10</div><div id="kd11" class="kd">11</div><div id="hour"></div><div id="minute"></div><div id="second"></div><div id="point"></div>
</div>*{font-size: 12px;margin: 0px;padding: 0px;}
#clock{width: 600px;height: 600px;border: 15px solid black;border-radius: 50%;position: absolute;left: 650px;top: 100px;box-shadow: 10px 10px 100px 10px black;background-color: #c2c4d3;
}
.kd{width: 9px;height: 290px;border-top: 10px solid black;left: 299px;position: absolute;transform-origin: bottom center;
}
#kd0{}
#kd1{transform: rotate(30deg);
}
#kd2{transform: rotate(60deg);
}
#kd3{transform: rotate(90deg);
}
#kd4{transform: rotate(120deg);
}
#kd5{transform: rotate(150deg);
}
#kd6{transform: rotate(180deg);
}
#kd7{transform: rotate(210deg);
}
#kd8{transform: rotate(240deg);
}
#kd9{transform: rotate(270deg);
}
#kd10{transform: rotate(300deg);
}
#kd11{transform: rotate(330deg);
}#hour{width: 10px;height: 150px;background: black;opacity: 1;left: 305px;top: 150px;position: absolute;transform-origin: bottom center;animation: rotate 720s linear infinite;
}#minute{width: 5px;height: 200px;background: cadetblue;opacity: 1;left: 305px;top: 100px;position: absolute;transform-origin: bottom center;animation: rotate 360s linear infinite;
}#second{width: 3px;height: 250px;background: red;opacity: 1;left: 305px;top: 50px;position: absolute;transform-origin: bottom center;animation: rotate 60s linear infinite;
}@keyframes rotate {0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}
}#point{width: 50px;height: 50px;border-radius: 50%;border:2px solid black;position: absolute;left: 281px;top: 270px;opacity: 0.5;}
本文发布于:2024-01-28 02:10:07，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063790154042.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
