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. poj——2084 　Game of Connections

    Game of Connections Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 8664   Accepted: 42 ...

  2. Ubuntu 16.04设置开机启动应用程序

    在终端通过以下命令进行设置,Dash已经搜索不到Startup了: gnome-session-properties 或者直接在Dash中搜索:gnome-session

  3. Linux后台执行

    在Linux中有时你须要将脚本(test.sh)和可运行程序(exe)后台运行,请使用例如以下方式: nohup ./test.sh & nohup ./exe & 这样执行的程序能够 ...

  4. 异常：”未处理System.TypeLoadException“

    1.问题由来:     在敲系统时原来的已有的类都能正常的执行,可是当加入一个新的实体类CancelCard的时候系统执行时显示错误例如以下: watermark/2/text/aHR0cDovL2J ...

  5. Oracle 简单的列转行

    需求是,统计每一个部门不同工种的薪水总和. SQL> select deptno,ename,job,sal from emp;     DEPTNO ENAME      JOB       ...

  6. Hadoop生态系统学习路线

    主要介绍Hadoop家族产品,经常使用的项目包含Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa.新添加 ...

  7. Mysql经常使用函数

    -----------------------------字符串函数--------------------------------------- ----拼接字符串.不论什么字符串与null拼接为n ...

  8. BC - Zball in Tina Town (质数 + 找规律)

    Zball in Tina Town  Accepts: 541  Submissions: 2463  Time Limit: 3000/1500 MS (Java/Others)  Memory ...

  9. 【数学】mex是什么

    最近在看博弈论,SG函数,所以什么是mex呢 然后百度了一下得到: mex(S) 的值为集合 S 中没有出现过的最小自然数.例如,mex({1,2}) = 0.mex({0,1,2,3}) = 4

  10. [HNOI2006]潘多拉的宝盒

    https://www.zybuluo.com/ysner/note/1250303 题面 给定\(s\)个自动机,如果某个自动机\(A\)能产生的所有串都能在自动机\(B\)中产生(即走相同\(0/ ...