纯CSS动态时钟

最新推荐文章于 2023-06-04 23:19:55 发布

前水员

最新推荐文章于 2023-06-04 23:19:55 发布

阅读量373

点赞数 1

分类专栏： css3 前端 HTML

本文链接：https://blog.youkuaiyun.com/qq_43465434/article/details/114364779

版权

本文介绍了如何使用纯CSS创建一个动态时钟，虽然CSS无法直接获取本地时间，但通过设定初始位置并模拟转动效果，可以实现类似动态时钟的展示。文章提供了HTML和CSS代码示例，并展示了时钟静止及运动状态的截图。此外，还提及了如果要实现根据当前时间转动的CSS+JS时钟，可以参考作者的另一篇文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，先上代码

HTML：

<div class="clock">
	<img src="img/clock.jpg" alt="">
	<div class="hour-hand"></div>
	<div class="minute-hand"></div>
	<div class="second-hand"></div>
	<div class="circle"></div>
</div>

CSS：

body{
   
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}
			.clock{