使用css3做钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style type="text/css" id="css">
.wrap{width: 200px;height: 200px;border: 2px solid #000;border-radius: 50%;margin: 100px auto;position: relative;}
li{position: absolute;width: 2px;height: 5px;top: 0;left: 99px;background: #000;-webkit-transform-origin: center 100px;}
/*li:nth-child(1){-webkit-transform: rotate(0deg);}
li:nth-child(2){-webkit-transform: rotate(6deg);}
li:nth-child(3){-webkit-transform: rotate(12deg);}
li:nth-child(4){-webkit-transform: rotate(18deg);}
li:nth-child(5){-webkit-transform: rotate(24deg);}
li:nth-child(6){-webkit-transform: rotate(30deg);}*/
li:nth-child(5n+1){height: 10px;}
#hour{width: 6px;height: 40px;background: #000;position: absolute;left: 97px;top: 60px;-webkit-transform-origin: bottom;}
#min{width: 4px;height: 60px;background: #999;position: absolute;left: 98px;top: 40px;-webkit-transform-origin: bottom;}
#sec{width: 2px;height: 70px;background: #f00;position: absolute;left: 99px;top: 30px;-webkit-transform-origin: bottom;}
.ico{width: 10px;height: 10px;background: #000;position: absolute;top: 95px;left: 95px;border-radius: 50%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("list");
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var aLi='';
var sss='';
for(var i=0;i<60;i++){
aLi+="<li></li>";
sss+='li:nth-child('+(i+1)+'){-webkit-transform: rotate('+i*6+'deg);}'
}
oUl.innerHTML=aLi;
oCss.innerHTML+=sss;
function toTime(){
var date=new Date();
var mySec=date.getSeconds();
var myMin=date.getMinutes()+mySec/60;
var myHour=date.getHours()+myMin/60;
oHour.style.webkitTransform='rotate('+myHour*30+'deg)';
oMin.style.webkitTransform='rotate('+myMin*6+'deg)';
oSec.style.webkitTransform='rotate('+mySec*6+'deg)';
}
toTime();
setInterval(toTime,1000);
}
</script>
</head>
<body>
<div class="wrap">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="ico"></div>
</div>
</body>
</html>
使用css3做钟表的更多相关文章
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- CSS3做小三角形
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8
- 利用HTML5 与CSS3 做的放大镜
利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...
- CSS3做动物走路效果
CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...
- css3做ipone当时的滑动解锁闪亮条
现在一般的登录 注册 什么 的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...
- 用js,css3 做的一个球
用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...
- 用Html5/CSS3做Winform,一步一步教你搭建CefSharp开发环境(附JavaScript异步调用C#例子,及全部源代码)上
本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...
- 用CSS3做3D动画的那些事
年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...
- 用css3做一个求婚小动画
概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...
随机推荐
- is not in the sudoers file的解决方法
遇到这个问题 修改sudoers 文件 /etc/sudoers 添加
- ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...
- VMware安装CentOS时,无法以图形界面安装解决办法
有的同学问: 用虚拟机软件(vmware.VirtualBox)安装CentOS系统时, 安装过程中没有中文,也没有出现图形界面,都是以命令行方式去安装, 有时候又会出现图形界面,不知道哪里配置的问题 ...
- js sort() reverse()
数组中存在的两个方法:sort()和reverse() 直接用sort(),如下: ,,,,,,,,,,,]; console.log(array.sort());ps:[0, 1, 2, 2, 29 ...
- SharePoint 是哪些人设计、开发的?
闲下来的时候,我有时候会想:SharePoint 是哪些人设计.开发的? 毕竟,你说一个单选的字段,你从列表里面添加的时候,字段类型选的是 “Yes/No”:而如果你是通过编程把它加入列表的时候,字段 ...
- Linux2.6内核进程调度系列--scheduler_tick()函数3.更新普通进程的时间片
RT /** * 运行到此,说明进程是普通进程.现在开始更新普通进程的时间片. */ /* 首先递减普通进程的时间片计数器.如果用完,继续执行以下操作 */ if (!--p->time_sli ...
- Android 手机卫士--导航界面4的业务逻辑
本文实现导航界面4的业务逻辑,导航界面4的界面如下: 本文地址:http://www.cnblogs.com/wuyudong/p/5952640.html,转载请注明出处. 相应的代码如下: pri ...
- 如何理解javaScript对象?
在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...
- 关于SQL Server镜像的一个小误区
昨天晚上突然接到客户的电话, 说在配置了镜像的生产环境数据库下修改 “已提交读快照” 选项的时候报错, 需要先取消镜像然后再重新搭建.悲催的是这是个近TB的数据库,问我有没有什么快速的方法.于是我就问 ...
- 实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...