1、秒钟转360度需要60s分60步

2、分针转360度需要3600s分60步

3、秒钟转360度需要43200s分60步

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.watch {
width: 200px;
height: 200px;
border: 2px solid #000;
margin: 150px auto;
position: relative;
border-radius: 50%;
} .watch .line {
width: 4px;
height: 200px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2px;
background-color: #ccc;
} .line2 {
transform: rotate(30deg);
} .line3 {
transform: rotate(60deg);
} .line4 {
transform: rotateZ(90deg);
} .line5 {
transform: rotateZ(120deg);
} .line6 {
transform: rotateZ(150deg);
} .cover {
position: absolute;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -85px;
width: 170px;
height: 170px;
background-color: #fff;
border-radius: 50%;
} .second, .minute, .hours {
position: absolute;
left: 50%;
background-color: pink;
opacity: 0.6;
transform-origin: bottom center;
} .second {
width: 3px;
margin-left: -1.5px;
height: 86px;
top: 50%;
margin-top: -86px;
animation: gun 60s infinite steps(60);
} .minute {
width: 4px;
margin-left: -2px;
height: 66px;
top: 50%;
margin-top: -66px;
background-color: #CC8E8F;
animation: gun 3600s infinite steps(60);
} .hours {
width: 7px;
margin-left: -3.5px;
height: 50px;
top: 50%;
margin-top: -50px;
background-color: #AB7878;
animation: gun 43200s infinite steps(60);
} .button {
width: 16px;
height: 16px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
background-color: #000000;
} @keyframes gun {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="watch">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="cover"></div>
<div class="second"></div>
<div class="minute"></div>
<div class="hours"></div>
<div class="button"></div>
</div>
</body>
</html>

html5——动画案例(时钟)的更多相关文章

  1. html5——动画案例(无缝滚动)

    无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. html5——动画案例(大海)

    太阳的发散效果主要是利用transform: scale(1.3),将物体变大 <!DOCTYPE html> <html lang="en"> <h ...

  3. html5——动画案例(太阳系)

    太阳系主要利用定位,伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  5. HTML5应用之时钟

    利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...

  6. 绝对震撼 7款HTML5动画应用及源码

    1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...

  7. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  8. 15款HTML5/CSS3案例展示,导航,日历,钟表。

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  9. 8个超炫酷仿苹果应用的HTML5动画

    苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...

随机推荐

  1. java多线程编程核心技术(二)--对象及变量的并发访问

    1.方法内部的私有变量是线程安全的,实例变量是线程不安全的. 2.A线程先持有object对象的lock锁,B线程可以以异步的方式调用object对象中的非synchronized类型的方法. 3.A ...

  2. mac os随笔

    1.定义对象的成员变量的时候以便使用下划线开头:例如NSImage    *_image;   NSURL的一个函数: getResourceValue:forKey:error: Returns t ...

  3. Mysql Innodb存储引擎 insert 死锁分析

    http://chenzhenianqing.cn/articles/1308.html

  4. Quartz.Net 使用心得(二)

    工作中需要做一个简易的Cron字符串生成器,并且要获取生成的Cron后面10次的触发时间来验证. 此问题困扰了我很久时间,CSDN上有一个Java版本的,本人菜鸟,想移植到C#中,语法上怎么也不通过. ...

  5. ArcGIS For Android 的标绘与可视化

    参考 1. CSDN 相关博文 2. ArcGIS for Android 离线数据空间分析--叠加分析 3. ArcGIS for Android Runtime100 基本操作(五)——绘制图层和 ...

  6. 【Python】Python 标准库 urllib2 的使用细节

    转自:http://zhuoqiang.me/python-urllib2-usage.html http://www.cnblogs.com/txw1958/archive/2012/03/12/2 ...

  7. 1.5 - 动态路由协议ISIS

    IS-IS 特征: 1:协议操作起来,比OSPF要简单 2:扩展性比OSPF要好,易于扩展 3:对IPv6有很好的支持 4:能够同时支持IP网络,和CLNS网络(OSI网络)(集成的IS-IS) 5: ...

  8. Codeforces 446C —— DZY Loves Fibonacci Numbers(线段树)

    题目:DZY Loves Fibonacci Numbers 题意比較简单,不解释了. 尽管官方的题解也是用线段树,但还利用了二次剩余. 可是我没有想到二次剩余,然后写了个感觉非常复杂度的线段树,还是 ...

  9. 【Poj1325】Machine Schedule机器调度

    目录 List Description Input Output Sample Input Sample Output HINT Solution Code Position: http://poj. ...

  10. java调用restful接口的方法

    Restful接口的调用,前端一般使用ajax调用,后端可以使用的方法如下: 1.HttpURLConnection实现 2.HttpClient实现 3.Spring的RestTemplate