利用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 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
过滤器的用法
2013/10/08 面试题
办公室主任先进事迹
2014/01/18 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
公务员个人考察材料
2014/12/23 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers