🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战 ，一个专注于分享网页制作实例的专栏~
专栏文章直链：
【网页制作】jQuery控制页面侧边栏的收缩与展开
【网页制作】制作百度网盘登录页
【网页制作】注册表单页
【网页制作】jQuery操作css实现设置箭头图片
制作要求
合理使用html + css制作静态钟表。
制作效果图
参考源代码
目录结构
└──网页文件夹
└──index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
position: absolute;
background-color: gray;
border-radius: calc(50%);
}
.box2 {
width: 280px;
height: 280px;
background-color: skyblue;
margin: 9px auto;
border: 1px solid #000;
border-radius: calc(50%);
position: relative;
}
.s {
width: 8px;
height: 60px;
background-color: #000;
position: absolute;
top: 140px;
left: 136px;
transform: rotateZ(45deg);
transform-origin: 50% 0;
}
.f {
width: 6px;
height: 90px;
background-color: #000;
position: absolute;
top: 140px;
left: 137px;
transform: rotateZ(30deg);
transform-origin: 50% 0;
}
.m {
width: 4px;
height: 120px;
background-color: #000;
position: absolute;
top: 140px;
left: 138px;
transform: rotateZ(15deg);
transform-origin: 50% 0;
}
.d1 {
width: 280px;
height: 280px;
position: relative;
}
.d1>div {
top: 130px;
width: 280px;
height: 20px;
line-height: 20px;
text-align: right;
position: absolute;
}
.d2 {
width: 16px;
height: 4px;
float: right;
margin: 8px 0;
background-color: #000000;
}
.d3 {
width: 8px;
height: 2px;
float: right;
margin: 8px 0;
background-color: #000000;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="s"></div>
<div class="f"></div>
<div class="m"></div>
<div class="d1">
<div style="transform: rotateZ(0deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(6deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(12deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(18deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(24deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(30deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(36deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(42deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(48deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(54deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(60deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(66deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(72deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(78deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(84deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(90deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(96deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(102deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(108deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(114deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(120deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(126deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(132deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(138deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(144deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(150deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(156deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(162deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(168deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(174deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(180deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(186deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(192deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(198deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(204deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(210deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(216deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(222deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(228deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(234deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(240deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(246deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(252deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(258deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(264deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(270deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(276deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(282deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(288deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(294deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(300deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(306deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(312deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(318deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(324deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(330deg);"><div class="d2"></div></div>
<div style="transform: rotateZ(336deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(342deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(348deg);"><div class="d3"></div></div>
<div style="transform: rotateZ(354deg);"><div class="d3"></div></div>
</div>
</div>
</div>
</body>
</html>
小小说一说
由于对方不会使用js生成刻度，所以我只能陪着手动敲上这么多行代码，哎…
致谢
本篇实例素材来自于 X Y H 🧡 ~
2160
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
