这篇博客详细介绍了如何使用纯CSS和原生JavaScript来创建一个旋转指针的时钟，提供了钟表的设计和实现过程，帮助读者理解并根据个人喜好定制钟表样式。
纯css，原生js编写旋转指针时钟，附详细讲解
/*html代码*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIY旋转时钟</title>
<link rel="stylesheet" href="DIYclock.css">
<script src="DIYclock.js"></script>
</head>
<body>
<div>DIY旋转时钟</div>
<div class="box">
<div id="clock" class="clock">
<div id="center" class="center"></div>
<div id="center-01" class="center-01"></div>
<div id="date" class="date"></div>
<div id="hour" class="hour"></div>
<div id="min" class="min"></div>
<div id="sec" class="sec"></div>
</div>
</div>
</body>
</html>这里是钟表的外观，主要用了css一些属性，可以根据自己喜欢的制作不同外观的钟表
/*css代码片*/
body{
background:linear-gradient(to right,lightgoldenrodyellow,pink,lightskyblue );
margin:0;
}
.box{
width:340px;
height:340px;
border:1px solid black;
position: relative;
border-radius:25%;
最低0.47元/天 解锁文章
扫一扫
1636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
