简单时钟——css3
这里我们使用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的更多相关文章
- Unity项目 - 简单时钟 Clock
项目展示 Github项目地址:简单时钟 Clock 制作流程 表盘绘制: 采用Aseprite 像素绘图软件绘制表盘及指针.本例钟表素材大小 256x256,存储格式为png,但发现导入Unity后 ...
- 简单了解css3样式表写法和优先级
css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- css3clock.js - 一个用CSS3与纯js实现的简单时钟
前言 项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 实现思路 主要是用CSS3控制时针.分针和秒针旋转:时针每12 ...
- 简单的CSS3 Loading动画
最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...
- Canvas基础学习（一）——实现简单时钟显示
HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...
- 简单使用CSS3实现炫酷读者墙效果
读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...
- 简单的CSS3鼠标滑过图片标题和遮罩层动画特效
此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有! 这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- JS实现简单时钟效果
老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...
随机推荐
- thinkPHP框架学习笔记
class ZhuantiAction extends Action { public function index() { $name = trim($this->_get('name')); ...
- JPA 系列教程10-双向一对一关联表
双向一对一关联表的ddl语句 CREATE TABLE `t_person` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(255 ...
- java的(PO,VO,TO,BO,DAO,POJO)包解释
java的(PO,VO,TO,BO,DAO,POJO)解释 action包 顾名思义请求,主要是和view 即我们所说的视图就是页面打交道,action类 是 操作方法,对于页 面Form 表单的操 ...
- POJ 3417 Network
每条额外的边加入到图中,会导致树上一条路径成环,假设没有其余边,那么要将新图分成两部分,如果想删一条成环路径上的边,那么必须把这条额外边也删除. 因此每条额外边加入时,只需将环上的边+1.最后看看每条 ...
- iOS拨打电话
1,这种方法,拨打完电话回不到原来的应用,会停留在通讯录里,而且是直接拨打,不弹出提示NSMutableString * str=[[NSMutableString alloc] initWithFo ...
- linux常用服务软件搭建及使用技巧
一.Webmin安装: Webmin 是一个基于浏览器的管理工具,可以应用于Linux 和其他一些平台,提供了可以完成很多管理和操作任务的图形化界面 •安装完成后,root 用户会被自动创建,密码为系 ...
- Primes on Interval
AC代码: #include <cstdio> #include <cstring> #include <iostream> #include <algori ...
- shell脚本学习（二）
4.cat命令 1) cat -s 摆脱多余的空白行 2) cat -T 将制表符显示为^I 3) cat -n 显示行号 4) cat -b 跳过空白行,然后显示行号 ...
- velocity 语法
1,如果调用是第一条就加上类名current. #foreach($info in $aboutlist) <li><a href="$!{info.href}" ...
- JSP内置对象--request对象 (setCharacterEncoding("GBK"),getParameter(),getParameterValues(),getParameterNames(),getServletPath(),getContextPath()
使用最多,主要用来接收客户端发送而来的请求信息,他是javax.servlet.http.HttpServletRequest接口的实例化对象. public interface HttpServle ...