<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
@keyframes minute {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes second {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.time {
width: 300px;
height: 300px;
border-radius: 50%;
background: #F2D298;
border:5px solid #F2D298;
margin:0 auto;
position: relative;
}
.minute {
width: 10px;
height: 100px;
background-color: #F4EBEB;
position: absolute;
left: 150px;
top: 60px;
/*ainimation:name duration timing-function delay iteration-count direction;*/
animation: minute 3600s linear 0s infinite;
transform-origin:5px bottom;
}
.second {
width: 7px;
height: 140px;
background-color: #F4EBEB;
position: absolute;
left: 2px;
top: -40px;
animation:second 60s linear 0s infinite;
transform-origin:2px bottom;
}
</style>
<body>
<!-- 实现钟表动画 -->
<div class="time">
<div class="minute">
<div class="second"></div>
</div>
</div>
</body>
</html>
以上是使用简单的css3动画实现的，有兴趣的朋友可以完善下，欢迎指点
时间： 2024-11-04 21:38:49