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 ...
随机推荐
- Maven基础教程
更多内容请参考官方文档:http://maven.apache.org/guides/index.html 官方文档很详细,基本上可以查找到一切相关的内容. 另外,快速入门可参考视频:孔浩的maven ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- Even Tree
Link: https://www.hackerrank.com/challenges/even-tree def search(a,b): # 根据核心算法和题目要求要筛选边 seen = {} s ...
- 【转】ios开发之生成所缩略图方式
亲测:两种方式都有效 第一种方式:缩略成固定的尺寸大小 - (UIImage *)thumbnailWithImageWithoutScale:(UIImage *)image size:(CGSiz ...
- C语言实现OOP 版本3 ：简化代码
我倒是不追求代码和C++相似,但是应该追求简洁的代码,下面是一个新的尝试 shape.h #ifndef SHAPE_H #define SHAPE_H typedef struct shape_t ...
- Unity3D 定时发射子弹
using UnityEngine; public class example : MonoBehaviour { public GameObject projectilePrefab; public ...
- 迁移笔记：对ob_start()的总结
1.Flush:刷新缓冲区的内容,输出. 函数格式:flush() 说明:这个函数经常使用,效率很高. 2.ob_start :打开输出缓冲区 函数格式:void ob_start(void) 说明: ...
- a:hover和a:visited书写顺序的重要性
2a:hover和a:visited书写顺序的重要性今天在用a:hover属性的时候发现一个奇怪的问题,同一个页面里面有些链接的a:hover效果不能正常表现出来.链接的代码是一样,没有使用其它样式固 ...
- Oracle 安装时候的网络相关内核参数
http://www.cnblogs.com/gaojian/archive/2012/10/12/2721284.html http://blog.chinaunix.net/uid-2442641 ...
- BZOJ3144 切糕
http://www.lydsy.com/JudgeOnline/problem.php?id=3144 思路:如果没有D的限制,那一个竖轴都是一个最小割,每个点向更高的点引一条流量为自己权值的边,那 ...