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. Elasticsearch权威指南（中文版）

    Elasticsearch权威指南(中文版) 下载地址: https://pan.baidu.com/s/1bUGJmwS2Gp0B32xUyXxCIw 扫码下面二维码关注公众号回复100010 获取 ...

  2. 网络安全传输系统-sprint1传输子系统

    一.产品规划与设计 二.传输子系统 基本框架:(1)不带安全功能的传输系统 (2)安全加密功能 part1:基本传输子程序设计(不带安全加密功能) 客户端 服务器 int main(int argc, ...

  3. LinuX操作系统基础------>了解文件结构和相关的文件操作

    了解LinuX文件系统 熟悉LinuX的文件结构 熟悉LinuX的基本操作指令 利用所学指令进行指令组合操作 什么是文件?什么是目录? 文件:一般是一个独立的东西,可以通过某些工具将其打开 目录:可以 ...

  4. JS 筋斗云案例

    .nav { width: 1000px; height: 60px; line-height: 60px; margin: 0 auto; position: relative; } ul { wi ...

  5. [leetcode/lintcode 题解] 有效回文 II · Valid Palindrome II

    [题目描述] 给一个非空字符串 s,你最多可以删除一个字符.判断是否可以把它变成回文串. 在线评测地址: https://www.lintcode.com/problem/valid-palindro ...

  6. 【ASP.NET Core学习】使用JWT认证授权

    概述 认证授权是很多系统的基本功能 , 在以前PC的时代 , 通常是基于cookies-session这样的方式实现认证授权 , 在那个时候通常系统的用户量都不会很大, 所以这种方式也一直很好运行, ...

  7. Mybatis-01-什么是Mybatis以及第一个Mybatis

    Mybatis-9.28 环境: jdk 1.8 Mysql 5.7 maven 3.6.1 IDEA 回顾: JDBC Mysql Java基础 Maven Junit SSM框架:配置文件,最好的 ...

  8. Mapreduce学习（一）

    MapReduce 介绍 简单介绍: MapReduce思想在生活中处处可见.或多或少都曾接触过这种思想.MapReduce的思想核心是“分而治之”,适用于大量复杂的任务处理场景(大规模数据处理场景) ...

  9. Android Studio && GitHub 团队多人一起开发

    曾几何时,花了两天的时间搞了合并项目,搞得乱七八糟der,但最终还是被我搞定了,too 乱 to 做笔记.过了几个月,也就是前几天,抱着从头开始的决心,再次尝试,然鹅并没有结果.今天,再一次重新开始, ...

  10. anaconda下载包时网络连接错误的解决方法（CondaHTTPError：HTTP 000 connection failed for url）

    继上一篇<在WSL上搭载python编程环境>之后,下载软件和创建新环境的过程非常艰辛,下载太慢,以至于常常中断. 不论用conda安装一些python的包,还是创新独立的编程环境时,出现 ...