小猿圈自学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，如果遇到不会的问题可以到小猿圈去寻找答案的，里面有最新最全面的视频教程等你来学习，只要你想学习编程这里都有。
转载于:https://juejin.im/post/5cee5167e51d45590a445ad9
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表相关推荐
- 小猿圈分享-web报表中电子印章/水印的轻松实现
报表数据系统中,有一个重要功能叫做电子签章,通俗的讲,就是不需要实际去盖章,而直接把印章打印到纸质文件上,省去手工盖章的费时费力环节,例如,银行系统中的银行流水打印,都需要盖章才能生效,如果按传统的做 ...
- 自学web前端练手——咖啡店主页（html+css3+js）
有参照页面,图片百度搜的+星巴克官网存的,半自撸. header部分用js实现图片来回切换. nav导航栏是超链接. 最左侧单一的图片是广告栏. 主体部分由左侧aside和右侧content组成. a ...
- 前端 鼠标一次移动半个像素_小猿圈分享2019年前端JavaScript面试题（三）
上篇文章小猿圈前端讲师为你分享了前端面试中js遇到的一些基础问题,接下来给大家讲解的就是前端基础和理论问题都有哪些,想学习web前端就来小猿圈自学吧,里面有全面的技术指导,还有专业的老师为你解答问题. ...
- 小猿看图CDN_小猿圈分析Linux运维工程师面试
原标题:小猿圈分析Linux运维工程师面试 互联网发展到了今天,很多同学都开始学习编程,java.python.linux.html5前端都是现在比较火爆的行业之一,而学习linux前端的同学也是最多 ...
- 前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
- 小猿圈WEB前端之HTML5+CSS3面试题（一）
越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机.如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今 ...
- 小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
- 小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
- css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
最新文章
- The Longest Increasing Subsequence (LIS)
- php 显示数据库操作错误,php操作mysql数据库编码错误
- mysql学习笔记之mysqlparameter（摘）
- 面向对象第四单元总结和期末总结
- python jdk安装_环境搭建：1.JDK安装配置
- 使用Movavi Photo Editor如何向视频中添加转场
- poj3274 找平衡数列（哈希加一点数学思维）
- Java多窗口编程示例
- 【数据库系统概论】数据库系统概述
- [译]nanomsg和ZeroMQ的区别
- 登上大别山主景区天堂寨
- pool(一)——入门
- 【数据库内核】数据库核心技术演进之路
- UBOOT----基于itop4412开发板，从0开始，慢慢摸索UBOOT的启动流程和系统组织结构（一）
- 【机器学习】线性回归实战案例一：多元素情况下广告投放效果分析步骤详解
- ci框架 反向代理配置_通过 nginx-proxy 实现自动反向代理和 HTTPS
- 从IO谈论编程的基础
- 文本PDG文件名构成
- [SCOI2009]粉刷匠 牛客DP入门
- 直播平台软件开发的前端如何实现整套视频直播技术流程