小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表-CSDN博客

前段时间发的五子棋的游戏很多小伙伴都私聊让再做个，今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例：用CSS3做个钟表，想玩的小伙伴记得自己运行一下呦。

自学CSS3属性之后，我们来用一个小案例进行一个综合练习，这个案例主要是动画的应用，我们就用纯css动画做一个能走字的钟表。

首先我们来准备HTML来布局一下：

布局很简单，六根直线通过旋转一定角度做刻度一个中间小圆点，一个遮罩来盖住六根直线的中间部分，使直线变成刻度，后面三个是时分秒针。

下面通过CSS把钟表的大概样子设置出来。

.clock { /* 创建圆形盒子当做表盘 / width: 200px; height: 200px; margin: 100px auto; position: relative; border: 10px solid #000; border-radius: 50%; } .clock div:nth-child(-n+6) { / 选中前6个子元素做出6条线当做表的刻度 / width: 6px; height: 200px; background-color: #aaa; position: absolute; left: 50%; margin-left:-3px; } / 让6条线递增旋转30度 */ .clock div:nth-child(1) { transform: rotate(30deg); } .clock div:nth-child(2) { transform: rotate(60deg); } .clock div:nth-child(3) { transform: rotate(90deg); background-color: #333; } .clock div:nth-child(4) { transform: rotate(120deg); } .clock div:nth-child(5) { transform: rotate(150deg); } .clock div:nth-child(6) { transform: rotate(0deg); background-color: #333; }

/* 中心小圆点 / .cent { width: 20px; height: 20px; background-color: #000; border-radius: 50%; position:absolute; z-index: 3; left: 50%; top:50%; margin: -10px 0 0 -10px; z-index:2; } / 遮住线的中间部分，让线成为刻度 */ .cover { width: 180px; height: 180px; border-radius: 50%; background-color: #fff; position:absolute; left: 50%; top:50%; margin:-90px 0 0 -90px; } 后面加上中心圆点和遮罩，让它看起来像个表盘。

接下来我们就可以准备表针和动画了。

/* 时针制作 / .hour { width: 6px; height: 50px; background-color: #000; position:absolute; left: 50%; top:100px; margin-left: -3px; animation: clockrotate 43200s steps(43200) infinite linear; transform-origin: top center; } / 分针制作 / .minute { width: 60px; height: 6px; background-color: #555; position:absolute; left:40px; top:50%; margin-top: -3px; animation: clockrotate 3600s steps(3600) infinite; transform-origin: center right; } / 秒针制作 / .seconds { width: 4px; height: 70px; background-color:red; position: absolute; left:50%; top:30px; margin-left: -2px; animation: clockrotate 60s steps(60) infinite ; transform-origin: bottom center; } / 设置动画序列 */ @keyframes clockrotate { form{

        }
        to {
            transform: rotate(360deg);
        }
    }
复制代码

设置每个针的动画是旋转360度，根据时、分、秒来计算动画执行完毕需要的时间和步数，加个infinite无限执行，另外还要注意表针旋转的中心点设置。

上述就是小猿圈老师针对CSS3动画练习案例：用CSS3做个钟表介绍，相信你对web前端也是有一定的了解的，如果遇到不会的问题可以到小猿圈去寻找答案的，里面有最新最全面的视频教程等你来学习，只要你想学习编程这里都有。