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. 20170613NOIP模拟赛

    共3道题目,时间3小时 题目非原创,仅限校内交流使用 题目名称 Graph Incr Permutation 文件名 graph incr permutation 输入文件 graph.in incr ...

  2. Asm.Def谈笑风生

    ★   输入文件:asm_talk.in   输出文件:asm_talk.out简单对比时间限制:2 s   内存限制:256 MB [题目描述] “人呐都不知道,自己不可以预料,直升机刚一出圣地亚哥 ...

  3. 19、Java并发性和多线程-嵌套管程锁死

    以下内容转自http://ifeve.com/nested-monitor-lockout/: 嵌套管程锁死类似于死锁, 下面是一个嵌套管程锁死的场景: 线程1获得A对象的锁. 线程1获得对象B的锁( ...

  4. Mongo使用

    在用mongo进行查询时,$exists表示是否document是否包括这个field,即使field的value为null也算是包括. $exists Syntax: { field: { $exi ...

  5. java及前端请求跨域问题

    主要代码:<meta http-equiv="Access-Control-Allow-Origin" content="*"> 说明一下什么情况下 ...

  6. Java程序执行超时——Future接口介绍

    在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java线程池ExecutorService类配合Future接口来实现. Future接口是Java标准API的一部分,在java.uti ...

  7. 小贝_mysql sql语句优化过程

    sql语句优化 一.SQL优化的一般步骤 (1).通过show status命令了解各种SQL的运行频率. (2).定位运行效率较低的SQL语句-(重点select) (3).通过explain分析低 ...

  8. Window attributes属性详解

    以下属性以Dialog为例来讲解: <item name="windowBackground"> 窗体的背景 </item><item name=&q ...

  9. sqlserver 触发器实例代码

    定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序.触发器是一个特殊的存储过程. 常见的触发器有三种:分别应用于Insert , Update ...

  10. AAC的ADTS头文件信息介绍

    遵循:BY-SA 署名-相同方式共享 4.0协议   作者:谭东 时间:2016年10月28日 环境:Windows 7   ADTS是Audio Data Transport Stream的简称. ...