css实现时钟
1实现效果
二、源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style>
*{
margin: 0;
padding: 0;
}/* 清楚默认效果 */
.clock{
width: 350px;
height: 350px;
margin: 30px auto;
border-radius:50%;
border: 3px black solid;
position: relative;
background-image: url(../时钟背景.jpg);
background-size: cover;
}/* 设置时钟外表和相对定位 */
.clock > div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}/* 设置时钟的直接子元素居中 */
/* 小时 */
.hour-warpper{
width: 70%;
height: 70%;
animation: run 43200s linear infinite ;
}
.hour{
height: 50%;
width:7px;
background-color: black;
margin: 0 auto;/* 图片原因，导致中心偏下 */
}
/* 分钟 */
.min-warpper{
height: 80%;
width: 80%;
animation: run 3600s infinite ;
}
.min{
margin: 0 auto;
height: 50%;
width: 3px;
background-color: blue;
}
/* 秒钟 */
.sec-warpper{
width: 90%;
height: 90%;
animation: run 60s infinite steps(60);
}
.sec{
margin: 0 auto;
height: 50%;
width: 2px;
background-color: red;
}
/* 动画 */
@keyframes run{
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(1turn);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="hour-warpper">
<div class="hour">
</div>
</div>
<div class="min-warpper">
<div class="min">
</div>
</div>
<div class="sec-warpper">
<div class="sec"></div>
</div>
</div>
</body>
</html>
不喜勿噴。