css3+html5——摆动的钟表

最新推荐文章于 2021-08-04 02:14:35 发布

十二Tel

最新推荐文章于 2021-08-04 02:14:35 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80654753

版权

先提供两张钟表和秒针的图：（具体大小需要自己下去调）

然后是效果图：

代码如下：

<!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>
    <div class="stage">
        <div class="watch"><img src="../img/clock.png" alt="" width="120" height="410"></div>
        <div class="seconds"><img src="../img/secondHand.png" alt="" width="10" height="55"></div>
    </div>
</body>
</html>

针对秒针转动过程中，中心点刚开始在圆心，之后移出去了的问题：

修改css中 .seconds 中 -webkit-transform-origin: center 68%; 中的百分比，调为秒针中旋转的中心点占秒针总长度的百分比即可。

十二Tel

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css3+html5——摆动的钟表

先为大家提供两张钟表和指针的图：（具体大小需要自己下去调）然后是效果图：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摆动的钟表&lt;/title&gt; &a
复制链接

扫一扫