CSS3实现时间表
一直想学CSS3，今天别的论坛看到的例子，挺好，mark起来以后自己看。
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>title</title>
<style>
*{margin:0;padding:0}
#box{
width:300px;
height:300px;
border:1px solid #000;
border-radius:50%;
position:absolute;
top:100px;left:300px;
box-shadow:1px 1px 5px #000;
cursor:pointer;
}
.hour{
width:14px;
height:80px;
background:#000;
position:absolute;
top:50%;left:50%;
margin:-80px 0 0 -7px;
transform-origin:center bottom;
}
.min{
width:14px;
height:100px;
background:#000;
position:absolute;
top:50%;left:50%;
margin:-100px 0px 0px -7px;
border-radius:50% 50% 0 0;
transform-origin:center bottom;
}
.sec{
width:4px;
height:120px;
background:red;
position:absolute;
top:50%;left:50%;
margin:-120px 0 0 -2px;
transform-origin:center bottom;
}
.cap{
width:20px;
height:20px;
background:#999;
border-radius:50%;
position:absolute;
top:50%;left:50%;
margin:-10px 0 0 -10px;
}
.scale{
width:4px;
height:10px;
background:#000;
position:absolute;
left:50%;
margin-left:-2px;
display:block;
-webkit-transform:rotate(45deg);
transform-origin:center 150px;
}
.bs{
width:6px;height:18px;
background:#000;
position:absolute;
left:50%;
margin-left:-3px;
display:block;
-webkit-transform:rotate(45deg);
transform-origin:center 150px;
}
.bs em{
width:50px;
text-align:center;
margin:17px 0;
position:absolute;
top:0px;left:50%;
margin-left:-25px;
font-style:normal
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var oH = document.querySelector('.hour');
var oM = document.querySelector('.min');
var oS = document.querySelector('.sec');
var N = 60;
for(var i=0;i<N;i++){
var oSpan = document.createElement('span');
if(i%5==0){
oSpan.className = 'bs';
var num = i/5==0 ? 12:i/5;
oSpan.innerHTML = '<em>'+num+'</em>';
oSpan.style.transform = 'rotate('+(i*N)+'deg)';
oSpan.children[0].style.transform = 'rotate('+ -i*6 +'deg)';
}else{
oSpan.className = 'scale';
}
oBox.appendChild(oSpan);
oSpan.style.transform = 'rotate('+6*i+'deg)';
} function clock(){
var oDate = new Date();
var h = oDate.getHours();
var m = oDate.getMinutes()+1;
var s = oDate.getSeconds();
var ms= oDate.getMilliseconds();
oH.style.transform = 'rotate('+(h*30+m/60*30)+'deg)';
oM.style.transform = 'rotate('+(m*6+s/60*6)+'deg)';
oS.style.transform = 'rotate('+(s*6+ms/1000*6)+'deg)';
}
clock();
setInterval(clock,30);
}
</script>
</head>
<body>
<div id="box">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
</body>
</html>
CSS3实现时间表的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- .NET Core RC2/RTM 明确了时间表
.NET Core 经过了将近2年的开发,去年12月份发布的RC1版本,明确来说那只是一个beta版本,自从RC1发布以来,看到github里的RC2分支,整个工具链都发生了很大的变化,大家都在焦急的 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
随机推荐
- <c:if>标签
<c:if>的用途就和我们一般在程序中用的if一样. 语法 语法1:没有本体内容(body) <c:if test="testCondition" var=&qu ...
- python的and与or剖析
1.只含有and的表达式 In []: and True and ' Out[]: ' In []: and and True and 'long' Out[]: 从左向右,遇到False,则返回改值 ...
- InnoSetup XML操作函数
用于InnoSetup 5 以上.对XML文件的操作,简化InnoSetup XML访问过程. 1. [代码]InnoSetup 5 脚本 { ======================== ...
- GStreamer Plugin: Embedded video playback halted; module decodebin20 reported: Your GStreamer installation is missing a plug-in.
标题是在Linux下使用系统yum install 的opencv库来获取视频帧的时候抛出来的错误消息.opencv调用了Gstream的API来处理了视频.错误抛出的代码如下图: http://ub ...
- iostat 离线安装
由于lucene需要一定的io读写顾安装iostat来对磁盘io进行监控 iostat 属于sysstat下的功能 git路径如下:https://github.com/sysstat/sysstat ...
- 【转】android cts测试方法及步骤
原文网址:http://blog.csdn.net/shi_xin/article/details/42262675 1.CTS下载 打开下面网址, http://source.android.com ...
- RBL, UBL, Uboot的关系
RBL, UBL, Uboot的关系 1)RBL=ROM Bootloader,UBL=user Bootloader. 2)RBL为TI固化在芯片ROM中的bootloader,OMAP上电启动过后 ...
- mysql 中 LIMIT的简单用法
mysql--语法: SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset --举例: select * from table l ...
- batch 批处理获取系统时间
文件test.bat,内容命令如下: @echo off set filename=%,%-%,%-%,% %,%:%,%:%,% echo %filename% pause
- 【shell】构造并遍历二位数组的一种用法
参考shell数组的部分操作用法,实现了构造和遍历二维数组的一种方式,具体如下: #数组元素以空格分割 sites=("www.a.com www.b.com www.c.com www.d ...