css3实现钟表特效
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>钟表</title>
<style type="text/css" id="css">
#clock{width:200px;height:200px;border:2px solid #333333;margin:100px auto;border-radius:50%;position: relative;
box-shadow: 0 0 10px #FCE300; background:url(1.jpg) no-repeat;background-size: 200px 200px;}
#clock ul{margin: 0;padding: 0;list-style: none;height:200px;position: relative;}
#clock ul li{background: #010101;width: 2px;height: 6px;position: absolute;left:99px;top:0;
-webkit-transform-origin:center 100px;-moz-transform-origin:center 100px;
-ms-transform-origin:center 100px;-o-transform-origin:center 100px;
transform-origin:center 100px;}
#clock ul li:nth-of-type(5n+1){height:10px;}
#hour{width: 6px;height: 35px;background: #f00;position: absolute;left: 97px;top:65px;
-webkit-transform-origin:bottom;-moz-transform-origin:bottom;
-ms-transform-origin:bottom;-o-transform-origin:bottom;
transform-origin:bottom;}
#min{width: 4px;height: 55px;background: blue;position: absolute;left: 98px;top:45px;
-webkit-transform-origin:bottom;-moz-transform-origin:bottom;
-ms-transform-origin:bottom;-o-transform-origin:bottom;
transform-origin:bottom;}
#sec{width: 2px;height: 80px;background: orange;position: absolute;left: 99px;top:20px;
-webkit-transform-origin:bottom;-moz-transform-origin:bottom;
-ms-transform-origin:bottom;-o-transform-origin:bottom;
transform-origin:bottom;}
.Icon{position: absolute;left: 95px;top:95px;width: 10px;height: 10px;background:#242424;border-radius: 50%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oCss = document.getElementById("css");
var oClock = document.getElementById("clock");
var oHour = document.getElementById("hour");
var oMin = document.getElementById("min");
var oSec = document.getElementById("sec");
var oUl = oClock.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var str = "";
var sCss = "";
for(var i=0;i<60;i++){
//var oLi = document.createElement('li');
//oUl.appendChild(oLi);
str+="<li></li>";
sCss+="#clock ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+6*i+"deg);-moz-transform:rotate("+6*i+"deg);-ms-transform:rotate("+6*i+"deg);-o-transform:rotate("+6*i+"deg);transform:rotate("+6*i+"deg);}";
}
oUl.innerHTML = str;
oCss.innerHTML += sCss;
setInterval(time,1000);
time();
function time(){
var oDate = new Date();
var aSec = oDate.getSeconds();
var aMin = oDate.getMinutes()+aSec/60;
var aHour = oDate.getHours()+aMin/60;
oHour.style.WebkitTransform = "rotate("+aHour*30+"deg)";
oMin.style.WebkitTransform = "rotate("+aMin*6+"deg)";
oSec.style.WebkitTransform = "rotate("+aSec*6+"deg)";
oHour.style.MozTransform = "rotate("+aHour*30+"deg)";
oMin.style.MozTransform = "rotate("+aMin*6+"deg)";
oSec.style.MozTransform = "rotate("+aSec*6+"deg)";
oHour.style.MsTransform = "rotate("+aHour*30+"deg)";
oMin.style.MsTransform = "rotate("+aMin*6+"deg)";
oSec.style.MsTransform = "rotate("+aSec*6+"deg)";
oHour.style.OTransform = "rotate("+aHour*30+"deg)";
oMin.style.OTransform = "rotate("+aMin*6+"deg)";
oSec.style.OTransform = "rotate("+aSec*6+"deg)";
oHour.style.transform = "rotate("+aHour*30+"deg)";
oMin.style.transform = "rotate("+aMin*6+"deg)";
oSec.style.transform = "rotate("+aSec*6+"deg)";
}
}
</script>
</head>
<body>
<div id="clock">
<ul>
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="Icon"></div>
</div>
</body>
</html>
效果：
css3实现钟表特效的更多相关文章
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
- CSS3实现烟花特效 --web前端
烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...
- 纯CSS3实现3D特效的iPhone 6动画
iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示 ...
- CSS3 filter10种特效整理
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.一共有10种最基本的特效,下来这个DEMO很好的展示了这些效果: <!DOCTYPE html ...
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- css3实现钟表效果
利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下: <head> <meta charset="UTF-8"> <titl ...
随机推荐
- 关于RGB转换YUV的探讨与实现
最近在Android手机上使用相机识别条形码工作取得了比较理想的进展,自动识别功能基本完成,然而在手动识别指定条形码图片时遇到困难,由于Zxing开源Jar包识别图片的颜色编码式为YUV,而普通的图片 ...
- jquerymobile知识点三：弹出层popup
弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...
- java final keyword
依据上下文环境,java的keywordfinal也存在着细微的差别,但通常指的是“这是无法改变的.”不想改变的理由由两种:一种是效率,还有一种是设计.因为两个原因相差非常远,所以关键子final可能 ...
- 系统性能优化分析—CPU消耗
http://blog.csdn.net/longdel/article/details/7296446
- hadoop错误Cannot load libsnappy.so.1 (libsnappy.so.1 cannot open shared object file No such file or directory)!
报如下错误 解决方法: 1.下载libsnappy.so.1(https://yunpan.cn/cSHRHTBJGVVX6 访问密码 c992) 2.上传到linux系统 3.安装 4.安装完成后 ...
- myeclipse2014新感悟
部署有两种方式:1.直接把文件拷贝到 tomcat下的webroot文件夹下 2.myeclipse软件内部点击“deploy”部署 →点击add→tomcat下的webroot文件夹下 点击完“运行 ...
- eclipse快速查找一个变量、方法或者类被引用的地方
最近不停debug,拿到一个变量之后总是要先概览一下才好下手,之前一直用Ctrl+F来做,太麻烦.今天查了下eclipse使用,发现有快捷键,使用方法: 先双击要查看的变量.方法或者类,使之被选中,然 ...
- 转--DataTable 修改列名 删除列 调整列顺序
DataTable myDt =dt; //删除列 myDt.Columns.Remove("minArea"); myDt.Columns.Remove("maxAre ...
- javascript异步加载详解（转）
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- DLL Export 报错
编译报错: error : syntax error at token xxxx 修改非Unicode 系统区域设计即可