先提供大家兩張鐘錶和指標的圖：（具體大小需要自己下去調）
然後是效果圖：
#然後是效果圖：
<!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中文網其他相關文章！
