小猿圈自学web前台之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个，今天小猿圈web前台讲师为大家分享的是CSS3动画练习案例：用CSS3做个钟表，想玩的小伙伴记得自己运行一下呦。
自学CSS3属性之后，我们来用一个小案例进行一个综合练习，这个案例主要是动画的应用，我们就用纯css动画做一个能走字的钟表。
首先我们来准备HTML来布局一下：
<body>
? ? <div class=”clock”>
? ? ? ? <div class=”line1″></div>
? ? ? ? <div class=”line2″></div>
? ? ? ? <div class=”line3″></div>
? ? ? ? <div class=”line4″></div>
? ? ? ? <div class=”line5″></div>
? ? ? ? <div class=”line6″></div>
? ? ? ? <div class=”cent”></div>
? ? ? ? <div class=”cover”></div>
? ? ? ? <div class=”hour”></div>
? ? ? ? <div class=”minute”></div>
? ? ? ? <div class=”seconds”></div>
? ? </div>
</body>
布局很简单，六根直线通过旋转肯定角度做刻度一个中间小圆点，一个遮罩来盖住六根直线的中间部分，使直线变成刻度，后面三个是时分秒针。
下面通过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前台也是有肯定的理解的web前台自学②群：738735873，假如遇到不会的问题可以到小猿圈去寻觅答案的，里面有最新最全面的视频教程等你来学习，只需你想学习编程这里都有。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 小猿圈自学web前台之CSS3动画练习案例：用CSS3做个钟表
