先为大家提供两张钟表和指针的图：（具体大小需要自己下去调）
然后是效果图：
代码如下：
<!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中文网。
相关推荐：
立即学习“前端免费学习笔记（深入）”；
以上就是css3+html5——摆动的钟表的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
996
收藏
