用CSS3写的钟表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style id="css">
#wrap{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
#wrap ul{
margin: 0;padding: 0;
height: 200px;
list-style: none;
position: relative;
}
#wrap ul li{
width: 2px;height: 8px;background: #000;
position: absolute;
left: 99px;
top:0;
-webkit-transform-origin: center 100px;
}
/*#wrap ul li:nth-of-type(1){
-webkit-transform: rotate(0deg);
}
#wrap ul li:nth-of-type(2){
-webkit-transform: rotate(6deg);
}
#wrap ul li:nth-of-type(3){
-webkit-transform: rotate(12deg);
}
#wrap ul li:nth-of-type(4){
-webkit-transform: rotate(18deg);
}
#wrap ul li:nth-of-type(5){
-webkit-transform: rotate(24deg);
}
#wrap ul li:nth-of-type(6){
-webkit-transform: rotate(30deg);
}
#wrap ul li:nth-of-type(7){
-webkit-transform: rotate(36deg);
}
#wrap ul li:nth-of-type(8){
-webkit-transform: rotate(42deg);
}*/
#wrap ul li:nth-of-type(5n+1){
height: 12px;
}
#hour{
width: 6px;
height: 45px;
background: #000;
position: absolute;
left: 97px;
top:55px;
-webkit-transform-origin: bottom;
}
#min{
width: 4px;
height: 65px;
background: #999;
position: absolute;
left: 98px;
top: 35px;
-webkit-transform-origin: bottom;
}
#sec{
width: 2px;
height: 80px;
background: red;
position: absolute;
left: 99px;
top: 20px;
-webkit-transform-origin: bottom;
}
#icon{
width: 20px;height: 20px;
background: #000;
border-radius: 50%;
position: absolute;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<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 id="icon"></div>
</div>
<script>
var oList=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 sCss='';
for(var i= 0;i<60;i++){
sCss+='#wrap ul li:nth-of-type('+(i+1)+'){-webkit-transform: rotate('+i*6+'deg);}';
aLi+='<li></li>';
}
oList.innerHTML=aLi;
oCss.innerHTML+=sCss;
setInterval(toTime,1000);
toTime();
function toTime(){
var oDate=new Date();
var iSec=oDate.getSeconds();
var iMin=oDate.getMinutes()+iSec/60;
var iHour=oDate.getHours()+iMin/60;
oSec.style.WebkitTransform='rotate('+iSec*6+'deg)';
oMin.style.WebkitTransform='rotate('+iMin*6+'deg)';
oHour.style.WebkitTransform='rotate('+iHour*30+'deg)';
}
</script>
</body>
</html>
在写的过程中，发现了一个小问题：
时分秒的顺序不能写错，开始我把时写在最上面，时针和分针怎么都没反映，这是执行顺序的原因吗？
用CSS3写的钟表的更多相关文章
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 一些纯css3写的公司logo
随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...
- css3写出飘雪花特效
大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- 纯css3写的仿真图书翻页效果
对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...
- 所有用CSS3写的3D特效，都离不开这些知识
起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...
- css3写出0.5px的边框
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...
- 使用纯css3写出来的表情包 (^v^)
效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://2 ...
随机推荐
- 国外.net学习资源网站
转载 :出处:http://www.cnblogs.com/kingjiong/ 名称:快速入门地址 http://chs.gotdotnet.com/quickstart/ 描述:本站点是微软.NE ...
- C#基础静态类的设计
- JAVA 泛型练习
二分查找: public class Q212 { public static void main(String [] args) { Integer []arr = {1,2,3,4,5,6,7,8 ...
- 当setTimeout遇到闭包
1: function myTest(){ for(var i=0; i< 5; i++){ setTimeout(console.log(i), 0); } } myTest(); 或者比较正 ...
- 从客户端检测到危险的Request.Form值解决方案
1.修改aspx页面中的代码,设置ValidateRequest="false" <%@ Page Language="C#" AutoEventWire ...
- C#简单注册表操作实例
1.简介操作 //设置注册值 private void Button_Click(object sender, RoutedEventArgs e) { //路径及间隔符号要正确 //1.如果指定路径 ...
- openfire spark 二次 开发 服务插件
==================== 废话 begin ============================ 最近老大让我为研发平台增加即时通讯功能.告诉我用comet 在web端实现即 ...
- angularjs——工具方法
1.fromJson 把json字符串转成JSON对象 var jsonStr='[{"Name":"abc","age":12},{&qu ...
- sql解释执行顺序
一.查询的逻辑执行顺序 (1) FROM left_table (3) join_type JOIN right_table (2) ON join_condition (4) WHERE where ...
- USB 调试工具（python2.7 + Tkinter + pyusb/pywinusb）
项目地址:USB-HID-TEST 整体预览图(win8下的效果): ====================== 项目结构: COM --hidHelper.py --usbHelper.py UI ...