转 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. ...

随机推荐

详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
Idea 常用功能汇总，工作中常用技巧,移出请说明原因，笔记花了好长时间汇总的
1.隐藏没用到的文件比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀. 2.常用技巧 2.1 通过Alt+F8查看变量 ...
petapoco 实体中字段去掉关联（类似于EF中的NotMap）
怎么才能让不是数据库表中的字段放在实体中而不影响正常的插入和更新呢? 找到 PetaPoco.cs 文件,打开之后,搜索插入方法(Insert),然后继续找到下一层方法就能看到如下代码: 看到这个注 ...
java——初识
java是现在最火的高级编程语言之一,功能强,应用广. java可以做什么? 1. 开发桌面应用程序 2. 开发面向Internet的应用程序开发java程序的基本步骤: 1. 编写源程序:mypr ...
SpringBoot打包报错没有主清单
1,如果你的POM是继承spring-boot-starter-parent的话,只需要下面的指定就行. <properties> <!-- The main class to st ...
navicate 远程无法链接linux上mysql数据库问题
1. 先确认阿里云是否放开了3306权限 (开启阿里云服务器端口) 2. 连接linux,登录数据库:mysql -uroot -p 修改root用户远程登录权限: 想myuser使用mypasswo ...
Python mysql 创建连接
安装 pymysql 模块 pip3 install pymysql # python2, 默认无 pip 命令 # python3, 默认自带 pip3 命令 mysql基本操作 # 导入 pymy ...
偏门却又实用的 CSS 样式
::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...
TS学习随笔（二)->类型推论，联合类型
这篇内容指南: -----类型推论 -----联合类型类型推论第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛 ...
mybatis 中使用 allowMultiQueries=true
单条的数据进行修改或者插入的时候没问题,但是进行批量操作的时候就会出现错误,是因为没有开启支持批量操作的功能. mybatis支持批量操作开启批量执行sql的开关,在拼装mysql链接的url时,为 ...

转 CSS3+js实现多彩炫酷旋转圆环时钟效果

转 CSS3+js实现多彩炫酷旋转圆环时钟效果的更多相关文章

随机推荐

热门专题