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. JQuery中如何重置(reset)表单(且清空隐藏域)

    由于JQuery中,提交表单是像下面这样的: 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下, ...

  2. 【转】建立一个更高级别的查询 API：正确使用Django ORM 的方式

    这个就比较深入啦... http://www.oschina.net/translate/higher-level-query-api-django-orm 结论: 在视图和其他高级应用中使用源生的O ...

  3. C语言的数组初始化

    http://blog.csdn.net/sibylle/article/details/2026915 一直以为 int a[256]={0};是把a的所有元素初始化为0,int a[256]={1 ...

  4. 数据切分——Atlas介绍

    Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本号的基础上,改动了大量bu ...

  5. Ubuntu下安装C/C++开发环境【！！！有更新！！！Ubuntu14.10下使用eclipse搭建C语言开发环境】

    (1)第一步安装Eclipse,有两种方法,使用软件市场搜索就可以得到,安装就可以 另外一种是使用终端安装,命令例如以下: sudo su进入root模式 输入password 然后 输入:sudo ...

  6. Intellij热部署插件JRebel使用方法（转载）

    Intellij热部署插件JRebel帮助开发者在项目处于运行状态下任意修改Java文件并动态反馈到运行的项目中.插件官方下载地址:https://plugins.jetbrains.com/plug ...

  7. charts柱状图，定时刷新

    option: var dataoptionone = { title : { text: '数据存储情况', subtext: '数据表', x:'center' }, tooltip: { sho ...

  8. 移植linux3.7到nuc900系列开发板遇到的问题

    通过移植学习linux新版本内核,大概了解一下内核变化. 记录一下移植过程中遇到的问题或值得注意的地方. 1,添加一款arm9芯片的支持 首先修改\arch\arm\tools\mach-types文 ...

  9. POJ 1663:Number Steps

    Number Steps Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 13758   Accepted: 7430 Des ...

  10. 在IIS上搭建WebSocket服务器（二）

    服务器端代码编写 1.新建一个ASP.net Web MVC5项目 2.新建一个“一般处理程序” 3.Handler1.ashx代码如下: using System; using System.Col ...