转 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. ...
随机推荐
- HBase简介及原理
HBase简介 1.HBase是一个万亿行,百万列大表(Big Table),数据存放在hdfs集群中: 写操作使用MapReduce处理,将(增删改)处理结果放入HBase中,读就直接读HBase: ...
- c# 对JSON字符串排序(KEY/VALUE)
public string StortJson(string json) { var dic = JsonConvert.DeserializeObject<SortedDictionary&l ...
- 1.Linux电源管理-休眠与唤醒
1.休眠方式 在内核中,休眠方式有很多种,可以通过下面命令查看 # cat /sys/power/state //来得到内核支持哪几种休眠方式. 常用的休眠方式有freeze,standby, mem ...
- [leetcode](4.21)1. 有序数组中的缺失元素
给出一个有序数组 A,数组中的每个数字都是 独一无二的,找出从数组最左边开始的第 K 个缺失数字. 示例 1: 输入:A = [4,7,9,10], K = 1 输出:5 解释: 第一个缺失数字为 5 ...
- strdup strcpy 的区别
strdup可以直接把要复制的内容复制给没有初始化的指针,因为它会自动分配空间给目的指针 strcpy的目的指针一定是已经分配内存的指针
- Elasticsearch系列（2）：安装Elasticsearch（Linux环境）
系统环境 操作系统:CentOS 6.9 Elasticsearch:6.2.2 Filebeat:6.2.2(收集IIS日志) Kibana:6.2.2 Java:Java 8 注意:elk最好选择 ...
- virtualbox中设置u盘启动
1.在磁盘管理中查看u盘的磁盘号X 2.管理员运行cmd,进入virtualbox目录 3.运行命令: VBoxManage internalcommands createrawvmdk -filen ...
- 魔幻般冒泡背景的CSS3按钮动画
这是一款非常有特点的CSS3按钮,按钮的背景不是北京图片,也不是单纯的颜色,而是一组魔幻般的冒泡背景动画.当我们将鼠标滑过按钮时,按钮的冒泡背景动画就可以展示出来.可以说这款CSS3按钮的设计风格相当 ...
- js截图及绕过服务器图片保存至本地（html2canvas）
今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...
- SQL分组函数
分组函数是对表中的多行进行操作,而每组返回一个计算结果.常用的分组函数包括: 函数 语法格式 函数描述以及注意事项 AVG AVG([distinct|all] expr) 返回一个数字列或计算列的平 ...