设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 552|回复: 0

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

[复制链接]
小猿圈002
累计签到：3 天
连续签到：3 天
发表于 2019-5-29 17:34:37 | 显示全部楼层 |阅读模式
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个，今天小猿圈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、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-893360-1-1.html 上篇帖子： 小猿圈：web前端工程师工资有多高？ 下篇帖子： 小猿圈Java循环嵌套语法的使用介绍
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表