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 ...
随机推荐
- Form 表单常用正则验证 （收藏）
1.^\d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-\d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[0-9 ...
- 修改mysql的默认字符集
\s 查看mysql的字符集 把server characterset和db characterset修改成utf8 在my.ini的mysqld下面添加两行代码,重启mysql [mysql] de ...
- js拖拽进度条
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx. ...
- stm32的FSMC
之前用的stm32f103rbt6,它是100引脚以内的,不带FSMC.驱动液晶屏或者SRAM要自己写时序方面的程序,比较麻烦.后来换成stm32f103zet6,带有FSMC.不过在学习FSMC的时 ...
- 养成代码注释习惯，帮助你更好使用NetBeans导航器
在使用NetBeans编写php代码时,为了在一个类中,或者在方法库文件中快速找到你想要找的函数或方法,通常我们会使用NetBeans的导航器. 我们看一个导航器的事例: 大家知道,在php中代码习惯 ...
- sgu To xor or not to xor
题意:从n个数中,选择一些数,使得异或最大. #include <cstdio> #include <cstring> #include <algorithm> # ...
- KEIL的宏汇编器A51介绍
A51是一种具有通用特性和用法的重定位宏汇编器.它与Intel公司的MASM51宏汇编器具有很好兼容性,支持模块化编程,可以方便地与高级语言接口.A51宏汇编器支持汇编伪指令.宏处理指令以及汇编控制命 ...
- 更改debian的软件源sources.list
之前debian6这系统是在公司装的.公司有百兆光纤,多线接入,就随便选了个源,也没多大问题.现在回到家里变成了2M的ADSL,很多软件更新不下来. 更改软件源,也就修改/etc/apt/source ...
- Unity UI和引用的管理中心
我们来谈谈Unity的UI, 通常会写一些UI页面,当A页面需要去操作B页面的时候. 至少要获取B页面的引用吧! 一般新人都会在组件的写一个public GameObject UIB页面的属性, 然后 ...
- Unity编辑器-创建单独编辑框,折叠框,提示框
今天我们就来学习如何创建一个编辑框,上面绘制一个折叠框里面有四种消息框. 代码如下: using UnityEngine; using System.Collections; using UnityE ...