这里我们使用css3的特性制作一个简易的时钟，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clock{
position: relative;
background: url(../img/ios_clock.svg) no-repeat center;
width: 300px;
height: 300px;
}
.clock::after{
content: "";
width: 10px;
height: 10px;
background:red;
position: absolute;
left: 150px;
top: 150px;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;

}

.hour{
width: 10px;
height: 60px;
background: deepskyblue;
position: absolute;
left: 145px;
top:90px;
transform-origin: 50% 100%;
animation: cycle 43200 linear infinite;
}

.minute{
width: 8px;
height: 80px;
background: red;
position: absolute;
left: 146px;
top: 70px;
transform-origin: 50% 100%;
animation: cycle 3600s linear infinite;
}

.second{
width: 4px;
height: 120px;
background: purple;
position: absolute;
left: 148px;
top: 50px;
transform-origin: 50% 80%;
animation: cycle 60s linear infinite;

}

@keyframes cycle{
100%{
transform: rotateZ(360deg);
}
}

.bb{position: absolute;
top: 400px;}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<div id="bb">ssss</div>
<script>
window.onload=function(){
var day = new Date();
var hour=day.getHours()
var minute=day.getMinutes();
var second=day.getSeconds();

var second1=second*6;
var minute1=minute*6+second*0.5
var hour1=(hour%12)*30+minute*0.5

var bb=document.getElementById("bb");
bb.innerHTML=hour1+" "+minute1+" "+second1
//

var h=document.getElementsByClassName("hour")
var m=document.getElementsByClassName("minute")
var s=document.getElementsByClassName("second")
h[0].style.transform='rotateZ('+hour1+'deg)'
m[0].style.transform='rotateZ('+minute1+'deg)'
s[0].style.transform='rotateZ('+second1+'deg)'

}

</script>
</body>
</html>

除了时钟的圆盘是背景图片之外，其他的没有问题。大致看上去也还可以，有强迫症的朋友可以自己用cavas自己画一个。

简单时钟——css3的更多相关文章

  1. Unity项目 - 简单时钟 Clock

    项目展示 Github项目地址:简单时钟 Clock 制作流程 表盘绘制: 采用Aseprite 像素绘图软件绘制表盘及指针.本例钟表素材大小 256x256,存储格式为png,但发现导入Unity后 ...

  2. 简单了解css3样式表写法和优先级

    css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  3. css3clock.js - 一个用CSS3与纯js实现的简单时钟

    前言 项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 实现思路 主要是用CSS3控制时针.分针和秒针旋转:时针每12 ...

  4. 简单的CSS3 Loading动画

    最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...

  5. Canvas基础学习（一）——实现简单时钟显示

    HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...

  6. 简单使用CSS3实现炫酷读者墙效果

    读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...

  7. 简单的CSS3鼠标滑过图片标题和遮罩层动画特效

    此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有!   这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...

  8. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

  9. JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...

随机推荐

  1. NOIP2014-普及组复赛-第三题-螺旋矩阵

    题目描述 Description 一个n行n列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第1行第1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵 ...

  2. java的克隆

    java有深拷贝和浅拷贝的区别. 浅拷贝:他是指拷贝该对象时,仅仅是拷贝了对象的本身(包括对象的基本数据类变量),不会拷贝引用数据类型的变量,也就是拷贝出来的新对象基本数据类型的值不变,引用数据类型的 ...

  3. Objective-C中关于请求返回NSData数据解析成NSDictionary或NSArray的方法

    1.如果后台返回的是字典或数组的data型,直接使用以下方法转换: { // Data 转成 字典 其中responseObject为返回的data数据 NSDictionary *resultDic ...

  4. 4. JavaScript 控制语句

    1. If...Else 语句 1.1 条件语句if /* 格式: 1. if ... 2. if ... else ... 3. if ... else if .... else 4. switch ...

  5. mongoDB6--查询表达式

    接上一篇总结<深入查询表达式1>上一篇我们介绍了mongodb的一些表达式的深入应用.可能大家觉得有些指令比较难记,下面给大家介绍一些简洁的表达式.给大家介绍的是以下两个指令:分别是$wh ...

  6. 五、oracle 表的管理

    一.表名和列名的命名规则1).必须以字母开头2).长度不能超过30个字符3).不能使用oracle的保留字4).只能使用如下字符 a-z,a-z,0-9,$,#等 二.数据类型1).字符类char 长 ...

  7. Redis简介二

    一.直接安装     1.Windows版本的Redis下载地址:https://github.com/dmajkic/redis/downloads  ,选择一个你想要下载的版本下载即可~     ...

  8. jquery 1.9版本后不在支持browser 方法的解决方案

    今天对jquery 进行升级,导致项目出错,原来在1.9版本之后 jquery 不支持browser 方法了.  官方建议的又不好用,所以我所jquery 原来的代码摘除来,又扩展回去. //解决jq ...

  9. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  10. MFC中修改默认启动对话框方法

    // CMyAppEApp 初始化 BOOL CMyAppEApp::InitInstance(){// 如果一个运行在 Windows XP 上的应用程序清单指定要// 使用 ComCtl32.dl ...