css3魔方3乘3每层旋转_小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表

前段时间发的五子棋的游戏很多小伙伴都私聊让再做个，今天小猿圈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前端也是有一定的了解的，如果遇到不会的问题可以到小猿圈去寻找答案的，里面有最新最全面的视频教程等你来学习，只要你想学习编程这里都有。