立诚勿怠,格物致知
It's all about connecting the dots

CSS实现钟表效果

一、CSS之Transform

1.1、用法示例

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

1.2、坐标轴/方向

x轴正方向为向右方向,y轴正方向为向下方向,z轴正方向为垂直纸面向外将右手拇指指向坐标轴正方向上,旋转的正方向与其余四指的方向为反方向

举例:

  • translateX(10px)表示在x轴正方向上移动10px,即向右移动10px。
  • translateY(10px)表示在y轴正方向上移动10px,即向下移动10px。
  • translateZ(10px)表示在z轴正方向上移动10px,即垂直纸面向里移动10px。
  • rotateZ(10deg)表示顺指针方向选择10deg,即右手拇指指向Z轴正方向(垂直纸面向外),向与四指相反的方向旋转10度。
  • rotateY(10deg)表示将一个矩形的左边垂直纸面向外,右侧垂直纸面向里,这样子旋转10度。
  • rotateX(10deg)表示将一个矩形的上面垂直纸面向里,下面垂直纸面向外,这样子旋转10度。

二、CSS之Animation

2.1、子属性

animation-name:动画名称。一般跟在@keyframes关键词后面。

animation-duration:指定动画完成一个循坏所需的时间。

animation-timing-function:指定动画执行的节奏。

animation-delay:指定动画的延迟时间。

animation-iteration-count:指定动画被执行的次数,可以通过infinite来指定无限循环。

animation-direction:指定是要正向播放动画还是反向播放动画。

  • normal:正向播放。
  • reverse:反向播放。
  • alternate:先正向播放,再反向播放,再正向播放,以此类推。
  • alternate-reverse:先反向播放,再正向播放,再反向播放,以此类推。

animation-fill-mode:指定在动画开始前或结束后是否要应用动画的样式。

  • none:不会应用动画的样式。
  • forwards:应用动画最后一帧的样式。
  • backwards:应用动画第一帧的样式。

animation-play-state:动画的播放状态(暂停播放、恢复播放)。

  • paused:暂停播放。
  • running:恢复播放。

2.2、使用示例

分开写:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

简写:

p {
  animation: 3s infinite alternate slidein;
}

 

三、实现钟表效果

问题:写一段HTML+CSS,实现一个钟,里面有时针、分针、秒针在旋转。

代码实现(为方便查看效果,转速提高了100倍,比如秒针转一圈实际需要60s,在这里我们设定的是0.6秒转一圈):

<html>
    <head>
        <style>
            .clock {
                position: fixed;
                top:  50%;
                left: 50%;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                border: 1px solid #000;
                transform:  translate(-50%, -50%);
            }
            .center {
                position:  absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
            }
            .pointer {
                position: absolute;
                left: 0;
                transform: rotateZ(-90deg);
                height: 0px;
                animation: animation_rotate 864s linear infinite;
            }
            .hour {
                animation-duration: 864s;
                width: 40px;
                border-top: 6px solid #000;
                top: -3px;
                transform-origin: 3px 0%;
            }
            .minute {
                animation-duration: 36s;
                width: 60px;
                border-top: 4px solid #0f0;
                top: -2px;
                transform-origin: 2px 0%;
            }
            .second {
                animation-duration: 0.6s;
                width: 80px;
                border-top: 2px solid #00f;
                top: -1px;
                transform-origin: 1px 0%;
            }
            @keyframes animation_rotate {
                0% {
                    transform: rotateZ(0deg);
                }
                100% {
                    transform:  rotateZ(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="clock">
            <div class="center">
                <div class="pointer hour"></div>
                <div class="pointer minute"></div>
                <div class="pointer second"></div>
            </div>
        </div>
    </body>
</html>

效果见下方视频:

参考

赞(2) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《CSS实现钟表效果》
文章链接:https://www.orzzone.com/css-clock.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册