转 CSS3+js实现多彩炫酷旋转圆环时钟效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多彩炫酷环形时钟效果</title>
<style type="text/css">
#fancyClock{
margin:40px auto;
height:200px;
border:1px solid #111111;
width:600px;
}
.clock{
/* 时钟div */
background-color:#252525;
height:200px;
width:200px;
position:relative;
overflow:hidden;
float:left;
} .clock .rotate{
/* 两个旋转的div，每个都分为左右两部分 */
position:absolute;
width:200px;
height:200px;
top:0;
left:0;
} .rotate.right{
display:none;
z-index:11;
} .clock .bg, .clock .front{
width:100px;
height:200px;
background-color:#252525;
position:absolute;
top:0;
} .clock .display{
/* 小时，分钟，秒钟的显示 */
position:absolute;
width:200px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:60px;
text-align:center;
top:55px;
left:0; /* CSS3 文字阴影 */
text-shadow:4px 4px 5px #333333;
} /* 左半边部分 */ .clock .bg.left{ left:0; } /* 每个不同颜色的背景图: */
.orange .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_blue.png) no-repeat left top; } /* 右边部分 */
.clock .bg.right{ left:100px; } .orange .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_blue.png) no-repeat right top; } .clock .front.left{
left:0;
z-index:10;
} </style>
</head> <body>
<div id="fancyClock">
<div class="orange clock">
<div class="display" id="hours">00</div>
<div class="front left"></div>
<div class="rotate left" id="orangeRotateLeft">
<div class="bg left"></div>
</div>
<div class="rotate right" id="orangeRotateRight">
<div class="bg right"></div>
</div>
</div>
<div class="blue clock">
<div class="display" id="minuts">00</div>
<div class="front left"></div>
<div class="rotate left" id="blueRotateLeft">
<div class="bg left"></div>
</div>
<div class="rotate right" id="blueRotateRight">
<div class="bg right"></div>
</div>
</div>
<div class="green clock">
<div class="display" id="seconds">00</div>
<div class="front left"></div>
<div class="rotate left" id="greenRotateLeft">
<div class="bg left"></div>
</div>
<div class="rotate right" id="greenRotateRight">
<div class="bg right"></div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
var $ = function(id){
return document.getElementById(id);
};
var o = {
hour: $("hours"), //小时数值对象
minu: $("minuts"), //分钟数值对象
sec: $("seconds"), //秒钟数值对象
orgl: $("orangeRotateLeft"), //黄色旋转左半区
orgr: $("orangeRotateRight"), //黄色旋转右半区
bluel: $("blueRotateLeft"), //蓝色旋转左半区
bluer: $("blueRotateRight"), //蓝色旋转右半区
sec: $("seconds"), //秒钟数值对象
greenl: $("greenRotateLeft"), //绿色旋转左半区
greenr: $("greenRotateRight") //绿色旋转右半区
};
var f = {
css: function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
},
zero: function(n, top){
n = parseInt(n, 10), top = top || "00";
if(n > 0){
if(n <= 9){
n = "0" + n;
}
return String(n);
}else{
return top.toString();
}
},
angle: function(v, total){
var scale = v / total, offsetx = 0, offsety = 0, an;
var angle = scale * 360; //当前角度值
//IE矩阵角度值计算
var m11 = Math.cos(Math.PI*2 / 360 * angle)
var m21 = Math.sin(Math.PI*2 / 360 * angle);
if(angle > 90){
an = angle - 90;
}else{
an = angle;
}
offsety = offsetx = (200 - 200 * Math.sqrt(2) * Math.cos(Math.PI / 180 * Math.abs(an - 45))) / 2 ;
return {
trans: "rotate("+angle+"deg)",
ie: "progid:DXImageTransform.Microsoft.Matrix(M11="+m11+",M12=-"+m21+",M21="+m21+",M22="+m11+",SizingMethod='auto expand',FilterType='nearest neighbor')",
offset: {
x: offsetx,
y: offsety
}
};
},
cartoon: function(l, r, v, part){
var total = part * 2, angleV, anglePart;
if(v <= part && v > 0){
angleV = f.angle(v, total);
l.style.display = "block";
l.style.filter = angleV.ie;
l.style.MozTransform = l.style.WebkitTransform = l.style.transform = angleV.trans;
r.style.display = "none";
//ie 旋转非居中旋转的修复
if(document.all){
l.style.left = angleV.offset.x + "px";
l.style.top = angleV.offset.y + "px";
}
}else{
v = Math.abs(v - part);
angleV = f.angle(v, total);
anglePart = f.angle(part, total);
l.style.display = "block";
l.style.filter = anglePart.ie;
l.style.MozTransform = l.style.WebkitTransform = l.style.transform = anglePart.trans;
r.style.display = "block";
r.style.filter = angleV.ie;
r.style.MozTransform = r.style.WebkitTransform = r.style.transform = angleV.trans;
if(document.all){
r.style.left = angleV.offset.x + "px";
r.style.top = angleV.offset.x + "px";
}
}
},
ui: function(){
var mytime = new Date();
var h = mytime.getHours(), m = mytime.getMinutes(), s = mytime.getSeconds();
o.hour.innerHTML = f.zero(h);
o.minu.innerHTML = f.zero(m, 60);
o.sec.innerHTML = f.zero(s, 60);
f.cartoon(o.orgl, o.orgr, h, 12);
f.cartoon(o.bluel, o.bluer, m, 30);
f.cartoon(o.greenl, o.greenr, s, 30);
setTimeout(f.ui, 1000);
}
};
f.ui();
})();
</script>
</body>
</html>
源文转载 http://www.zhangxinxu.com/wordpress/2010/08/css3js多彩炫酷旋转圆环时钟效果
转 CSS3+js实现多彩炫酷旋转圆环时钟效果的更多相关文章
- 使用Three.js网页引擎创建酷炫的3D效果的标签墙
使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...
- jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- legend---四、菜鸟教程css3里面有教你炫酷的按钮怎么做
legend---四.菜鸟教程css3里面有教你炫酷的按钮怎么做 一.总结 一句话总结:想学,总是有很多资料的 1. 自动居中是 margin:100px 0px;么? 自动居中是margin:100 ...
- jQuery+css3实现极具创意的罗盘旋转时钟效果源码
效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 21个CSS3 / JS 时钟
收集了21个酷炫的CSS / JS实现的时钟效果https://oktools.net/clocks 预览 :https://clocks.oktools.net/0/ 源码 :https://cod ...
- 大转盘抽奖css3+js(简单书写)
今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- CSS3+JS实现静态圆形进度条
一.实现原理 首先,我们来一个圆(黑色).接着,再来两个半圆,将黑色的圆遮住.(为了演示,左右两侧颜色不一样)这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12. ...
随机推荐
- 18.Class 的基本语法
Class 的基本语法 Class 的基本语法 简介 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子. function Point(x, y) { this.x ...
- 分部视图（Partial View）及Html.Partial和Html.Action差异
参考资料: https://www.cnblogs.com/Leon-Hu/p/5575311.html
- SQL--server事物
事物 特点: 1.原子性:事物必须是一个自动工作的单元, 2.一致性:事物结束的时候,所有内部数据都是正确的 3.隔离性:并发多个事物时,各个事物不干涉内部数据,处理的都是另外一个事物处理之前或之后的 ...
- SQL Server导入导出不丢主键和视图的方法
SQL Server导入导出 SQL Server 导入导出 工具/原料 使用Microsoft SQL Server Management Studio 导入导出数据. 直接使用Microsoft ...
- Java学习笔记之——常用类
Random,String,Math 1.Random Random() 创建一个新的随机数生成器 案例:产生3个5-10的随机数 运行结果 注意: 2.StingBuffer,StringBu ...
- 【Spring】22、Spring缓存注解@Cache使用
缓存注解有以下三个: @Cacheable @CacheEvict @CachePut @Cacheable(value=”accountCache”),这个注释的意思是,当调用这个 ...
- Hibernate入门(二)——hibernateAPI详解
Hibernate API 详解 1.Configuration 功能:配置加载类,用于加载主配置,orm元数据加载 .创建: Configuration conf = new Configurati ...
- javascript html页面中的内容替换
<script language="javascript"> function ffRed(){ var xsxf = document.getElementById ...
- [HTML/CSS]创建新元素的三种方法
第一种:通过text/HTML var txt1="<h1>Text.</h1>"; 第二种:通过jQuery var txt2=$("<h ...
- window.print()小知识
window.print() 实际上,是浏览器打印功能菜单的一种程序调用.与点击打印功能菜单一样,不能精确分页,不能设置纸型,套打的问题更加无从谈起,只不过,可以让用户不用去点菜单,直接点击网页中的 ...