先为大家提供两张钟表和指针的图：（具体大小需要自己下去调）
然后是效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摆动的钟表</title>
<style type="text/css">
body{
margin: 0;
background: #111;
text-align: center;
}
h1{
font-size: 14px;
font-family: "Microsoft YaHei UI";
text-align: center;
}
.stage{
width: 120px;
height:auto;
margin: 0 auto;
position: relative;
-webkit-transform-origin: center top;
-webkit-transform: rotate(-30deg);
-webkit-animation: sway 2.2s infinite alternate ease-in-out;/*alternate:反向*/
}
.watch{
width: 100%;
height: auto;
}
.seconds{
position: absolute;
width: 8%;
height:auto;
bottom:11%;
left:45.5%;
-webkit-transform-origin: center 68%;
-webkit-animation: second 60s infinite linear;/*infinite:无限循环*/
}
@-webkit-keyframes second {
to{
-webkit-transform: rotate(355deg);
}
}
@-webkit-keyframes sway {
to{
-webkit-transform: rotate(30deg);
}
}
</style>
</head>
<body>
<p class="stage">
<p class="watch"><img src="../img/clock.png" alt="" width="120" height="410"></p>
<p class="seconds"><img src="../img/secondHand.png" alt="" width="10" height="55"></p>
</p>
</body>
</html>本文讲解了利用css3+html5制作摆动的钟表，更多相关内容请关注php中文网。
相关推荐：
Atas ialah kandungan terperinci css3+html5——摆动的钟表. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
