There are only html5 and css3, an exercise to simulate clocks.
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>钟表测试test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.watch-wrapper{
width: 520px;
height: 520px;
/*background-color: #888888;*/
border-radius: 50%;
margin: 150px auto 0;
position: relative;
background-image: url("img/bg.png");
background-size: cover;
}
/*让后面的div全部居中 div里面套着时针 分针和 秒针*/
.watch-wrapper > div{
/*这三个针 同一个圆心 设置定位*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/*background-color: #f10215;*/
}
/*创建关键帧 并绑定 垂直这个面的一个轴 绕着ta转 一条线 我让他出现一半
rotateZ() 函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个<transform-function>数据类型。
*/
@keyframes run {
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(1turn);/*旋转一圈*/
}
}
/*设置这三个针*/
.h-wrapper{
width: 70%;
height: 70%;
animation: run 43200s linear infinite;/*转1圈 12小时 43200秒*/
}
.h-wrapper .h{
height: 50%;
width: 6px;
margin: 0 auto;
background-color: #333333;
}
/*后面分针 秒针 直接复制*/
.m-wrapper{
width: 80%;
height: 80%;
animation: run 3600s linear infinite;
}
.m-wrapper .m{
height: 50%;
width: 4px;
margin: 0 auto;
background-color: #c4712e;
}
.s-wrapper{
width: 70%;
height: 70%;
animation: run 60s linear infinite;
}
.s-wrapper .s{
height: 50%;
width: 2px;
margin: 0 auto;
background-color: #f41d21;
}
</style>
</head>
<body>
<div class="watch-wrapper">
<!--时针-->
<div class="h-wrapper">
<div class="h"></div>
</div>
<!--分针-->
<div class="m-wrapper">
<div class="m"></div>
</div>
<!--秒针-->
<div class="s-wrapper">
<div class="s"></div>
</div>
</div>
</body>
</html>
Result display:
