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. 将完整的Maven远程存储库下载到本地存储库（别试了，不太可取）

    别试了,这种方式不太可取. 要解决可以有如下思路: 1.做成镜像站点,有如下命令: wget -m http://site.to.mirror.com #-m代表“镜子”. rsync repo1.m ...

  2. NetCore +EFCore+SqlServer根据数据库生成实体类到项目中

    转载自:https://www.cnblogs.com/yangjinwang/p/9516988.html 1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装 ...

  3. Node.js 博客实例（三）添加文件上传功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

  4. windows bat命令 开启关闭Oracle服务

    0.吐槽 单位发的ThinkPad T61.太弱小了. 问题是我去百度下T61,发现它好贵好贵.真心无力吐槽.还不如给我发台外星人,廉价点的. . Oracle一开就内存就不够了.所以绝对不能让它开机 ...

  5. sqlite 数据库 相关知识

    一基本简单介绍 SQLite 是一个自持的(self-contained).无server的.零配置的.事务型的关系型数据库引擎.由于他非常小,所以也能够作为嵌入式数据库内建在你的应用程序中. SQL ...

  6. Linux下一款可以使用命令行的pdf阅读器

    Zathura是linux下一款用命令行控制打pdf阅读器,并且基本打使用方法和vim很相似.对于喜欢键盘操作的用户来说的确是一个不错的选择. ubuntu下的安装命令: sudo apt-get i ...

  7. Dictionary<string, string>是一个泛型使用说明

    Dictionary<string, string>是一个泛型使用说明 Posted on 2010-08-05 15:03 moss_tan_jun 阅读(2273) 评论(0) 编辑  ...

  8. allonsy

    时间限制 1s 空间限制 512MB 2.1 题目描述 "Allons-y!" 时间还算足够,好好看看题吧. 有一种说法,时间线是扭曲的,会相互交织.(一般在科幻片里比较流行?) ...

  9. openstack liberty aio nova 调试

  10. [Swift通天遁地]二、表格表单-(15)自定义表单文本框内容的格式

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...