利用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实现的几个小loading效果
Sep 27 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 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中的日期及时间
2006/11/23 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
Js的MessageBox
2006/12/03 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
详解react组件通讯方式(多种)
2020/05/06 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python实用代码片段收集贴
2015/06/03 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
办护照工作证明范本
2014/01/14 职场文书
校运会广播稿100字
2014/01/27 职场文书
一份创业计划书范文
2014/02/08 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
团队精神口号
2014/06/06 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
刘公岛导游词
2015/02/05 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Win2008系统搭建DHCP服务器
2022/06/25 Servers