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. hdu 2647拓扑排序 结构体模拟容器

    #include<stdio.h> #include<queue> #include<iostream> using namespace std; #define ...

  2. jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  3. [Vue @Component] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  4. [Vue @Component] Control Template Contents with Vue's Render Function

    Declaring templates and elements inside of templates works great for most scenarios. Sometimes you n ...

  5. UVa 10315 - Poker Hands

    题目:两个人手里各有五张牌,比較两牌型大小. 比較规则例如以下:(按优先级排序,优先级同样按以下内部规则比較) 1.straight-flush:同花顺,牌面连续,花色同样,按最大的值比較. 2.fo ...

  6. ROBODK仿真如何设置运动速度

    设置工具-选项-运动,把仿真时间设置成跟正常一样   然后双击机器人,设置参数(可以设置movej和movel的速度,加速度)  

  7. 一个unity3d lightmap问题

    上周美术同学在使用unity3d制作lightmap的过程中,发现部分被lightmap影响的模型在移动端上效果与pc端不一致.当时我大概看了下,分析后,得到一个结论是“在移动端上lightmap的h ...

  8. Oracle 用户管理(二)

    1    给某人赋予"系统权限"     SQL> grant connect to aobama with admin option     意思是将admin的连接数据库 ...

  9. ERROR (ConnectionError): HTTPConnectionPool (Caused by &lt;class &#39;socket.error&#39;&gt;: [Errno 111] Connecti

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免.欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  10. MongoDB 开机自启动

    MongoDB安装了以后,应当设置开机自启动. 假设启动命令如下: sudo /db/mongodb/265/bin/mongod --config /db/conf/mongodb/mongodb. ...