transform:rotate(1deg)


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="clock.css">

    <title>Clock</title>

</head>

<body>

    <div id="clock">

        <div class="pointer" id="hour"></div>

        <div class="pointer" id="minute"></div>

        <div class="pointer" id="second"></div>

    </div>

    <script>

        var hourEle = document.getElementById("hour");

        var minuteEle = document.getElementById("minute");

        var secondEle = document.getElementById("second");

        setInterval(

            function () {

                var d = new Date();

                var hour = d.getHours();

                var minute = d.getMinutes();

                var second = d.getSeconds();

                let hourDeg = (hour%12+minute/60)*30-90;

                let minuteDeg = (minute+second/60)*6-90;

                let secondDeg = second*6-90;

                hourEle.style.transform = "rotate("+hourDeg+"deg)";

                minuteEle.style.transform = "rotate("+minuteDeg+"deg)";

                secondEle.style.transform = "rotate("+secondDeg+"deg)";

            },

            1000

        )

    </script>

</body>

</html>

　　

#clock{

    position: relative;

    width: 100px;

    height:100px;

    -webkit-border-radius: 50px;

    border-radius: 50px;

    border: 1px solid grey;

}

.pointer{

    transform-origin: left center;

}

#hour{

    width: 30px;

    height: 4px;

    background-color: black;

    position: absolute;

    top:50%;

    left: 50%;

    margin-top: -2px;

}

#minute{

    width: 40px;

    height: 2px;

    background-color: blue;

    position: absolute;

    top:50%;

    left: 50%;

    margin-top: -1px;

}

#second{

    width: 45px;

    height: 1px;

    background-color: red;

    position: absolute;

    top:50%;

    left: 50%;

}

　　

利用css3 transform实现一个时钟的更多相关文章

  1. 公告栏添加时钟——利用canvas画出一个时钟

    前言 最近在学习HTML5标签,学到Canvas,觉得很有趣.便在慕课网找了个demo练手.就是Canvas时钟. 对于canvas,w3shcool上是这么描述的: HTML5 <canvas ...

  2. 利用javafx编写一个时钟制作程序

    1.首先创建一个时钟类,用于编写时钟的各种特有属性 package javaclock; /** * * @author admin */import java.util.Calendar;impor ...

  3. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  4. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  5. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  6. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  7. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  8. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  9. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

随机推荐

  1. Android VideoView未解决，动态读取权限、BottomNavigationView的用法

    昨天想写的,但是因为Video的毛病,是真找不出为啥了.百度也没用,学长也不清楚. 百度了那么久,大概得出结论,电脑的视频是不能用它来播放的... ..经过两天的奋斗,我居然搞定了,我的视频终于出来了 ...

  2. TF签名 外部测试 内部测试 TestFlight

    1.将release包传到iTunes connect 2. 绿线是内部测试 A.需要添加测试员 B.最多25个测试员 C.提交到iTunes connect不需要等待审核,即可测试 红线是外部测试( ...

  3. JavaFX桌面应用-MVC模式开发，“真香”

    使用mvc模块开发JavaFX桌面应用在JavaFX系列文章第一篇 JavaFX桌面应用开发-HelloWorld 已经提到过,这里单独整理使用mvc模式开发开发的流程. ~ JavaFX桌面应用开发 ...

  4. C#LeetCode刷题之#7-反转整数（Reverse Integer）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3838 访问. 给定一个 32 位有符号整数,将整数中的数字进行反 ...

  5. JavaScript 使用yrm修改镜像源

    安装yrm npm install -g yrm 列出当前可用的镜像源 # yrm ls npm ----- https://registry.npmjs.org/ cnpm ---- http:// ...

  6. 使用nebula把联想个人云存储映射到当前网络使用的方法

    整个过程涉及三个主机一个是家里的台式机 home 内网ip为192.168.69.101一个是公司的笔记本 mac一个是有公网ip的服务器 server云存储在家里和home在同一个内网,IP地址为1 ...

  7. 喵的Unity游戏开发之路 - 推球：游戏中的物理

    很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3D游戏开发. 本文不 ...

  8. Jmeter 常用函数（10）- 详解 __threadNum

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 返回当前线程组产生的线程的线程编号 语 ...

  9. Java 中几种常用设计模式

    Java 中一般认为有23种设计模式,当然暂时不需要所有的都会,但是其中常见的几种设计模式应该去掌握. 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模 ...

  10. MapReduce框架原理

    MapReduce框架原理 3.1 InputFormat数据输入 3.1.1 切片与MapTask并行度决定机制 1．问题引出 MapTask的并行度决定Map阶段的任务处理并发度,进而影响到整个J ...