利用CSS3 动画 绘画 圆形动态时钟


Posted in HTML / CSS onMarch 20, 2018

 什么是动画?这是我们应该先了解的问题。按照百度百科的解释动画是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么,只要它的拍摄方式是采用的逐格方式,观看时连续播放形成了活动影像,它就是动画。放在 CSS3 中大致可以理解为使元素从一种样式逐渐变为另一种样式,即将多个过渡效果放在一起形成的效果。CSS3 动画是通过 "关键帧",来控制动画的每一步。这里又有一个问题,什么是关键帧?我理解为定义动画执行的时间点和在该时间点上的样式是什么。

先给大家展示效果图:

利用CSS3 动画 绘画 圆形动态时钟 

通过 CSS3 动画绘制动态时钟的步骤

定义页面布局和样式

定义关键帧

  • 定义页面布局和样式
  • 定义关键帧
  • 调用动画实现动态效果调用动画实现动态效果

注意点

  • 在分针和秒针进行旋转时要保证是匀速旋转,即 transform-timing-function 速度曲线的值为 linear
  • 在分针和秒针进行旋转时要保证旋转原点的位置,即 transform-origin 的值要为 center、bottom(也可以利用像素和百分比进行改变)
  • 分针和秒针进行旋转的速度要区分

以下是 HTML 源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>clock</title>
    </head>
    <body>
        <div id="main">
            <div id="second"></div>
            <div id="minute"></div>
        </div>
    </body>
</html>

以下是 CSS3 源码

#main {
    width: 300px;
    height: 300px;
    border: 5px solid #0881A3;
    border-radius: 50%;
    margin: 50px auto 0;
    position: relative;/*定义表盘样式*/
}
#second {
    width: 5px;
    height: 120px;
    background: #393E46;
    position: absolute;
    top: 30px;
    left: 150px;
    transform-origin: center bottom;
    animation: second 60s linear infinite;/*定义秒针样式和动态效果*/
}
#minute {
    width: 10px;
    height: 80px;
    background: #40A798;
    position: absolute;
    top: 70px;
    left: 147px;
    transform-origin: center bottom;
    animation: minute 3600s linear infinite;/*定义分针样式和动态效果*/
}
@keyframes second {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}/*定义秒针过渡效果*/
@keyframes minute {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}/*定义分针过渡效果*/

总结

以上所述是小编给大家介绍的利用CSS3 动画 绘画 圆形动态时钟,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
css3 矩阵的使用详解
Mar 20 #HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 #HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 #HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 #HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 #HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
You might like
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php实现求相对时间函数
2015/06/15 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python标准库shutil用法实例详解
2018/08/13 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python实现最小二乘法线性拟合
2019/07/19 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
django 模型中的计算字段实例
2020/05/19 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
公务员更新知识培训实施方案
2014/03/31 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
python 如何做一个识别率百分百的OCR
2021/05/29 Python
浅析Python实现DFA算法
2021/06/26 Python
python库sklearn常用操作
2021/08/23 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python