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 ...
随机推荐
- js delete 用法
1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delet ...
- [Mugeda HTML5技术教程之15]案例分析：制作移动教育课件
本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法.Mugeda为移动教育领域和移动数字出版领域提供理想的教 ...
- php 实时推送代码
网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录. ...
- git:hook declined FATAL: W refs/heads DENIED by fallthru error
hook declined FATAL: W refs/heads DENIED by fallthru error git提交代码时报错,网上查了,最终结果竟然是测试人员没有给我配置写的权限,配置了 ...
- Windows Server 2003 SP2企业版ISO下载, windows2003系统下载,2003系统下载,2003系统
Windows Server 2003 SP2 企业版ISO下载(真正企业免激活版) 此版本适合作为一个新系统来安装,也适合在虚拟机中安装 点评:Windows Server 2003 SP2 企业版 ...
- Python一路走来 Python算法
冒泡排序: 1,2位置左右比较.大的排右边,继续比较2,3 ...... list=[5,7,2,8,12,1] #print(len(list)) for j in range(len(list)) ...
- ubuntu下安装postgres
PostgreSQL 是一款强大的,开源的,对象关系型数据库系统.它支持所有的主流操作系统,包括 Linux.Unix(AIX.BSD.HP-UX,SGI IRIX.Mac OS.Solaris.Tr ...
- python学习视频整理
python3英文视频教程(全87集) http://pan.baidu.com/s/1dDnGBvV python从入门到精通视频(全60集)链接:http://pan.baidu.com/s/1e ...
- 什么是dtd文件，为什么需要dtd
DTD为英文Document Type Definition,中文意思为"文档类定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码.也许 ...
- HDU 4411 Arrest
http://www.cnblogs.com/jianglangcaijin/archive/2012/09/24/2700509.html 思路: S->0 流量为K费用0 0->i 流 ...