纯CSS3打造动态时钟

本来想看看有没有人用CSS3画时钟，结果百度了一下，点了七八个链接都是一样的内容，真是太没劲了，这些家伙只知道粘贴复制别人的，还是应该自己动手做一下撒！

于是就自己DIY了一个，发现CSS3越来越强大了，任何你想画的东西，想做的效果，只要你动手再加上点耐力，一定能搞出来的！无外乎就是各种形状的组合，慢慢拼呗，只要你时间多！

来吧，宝贝，别害怕也别害羞，抓起你手中的鼠标，端起你手中的键盘，猛敲吧，告诉别人，I can code！

下面是效果图 ：

clock.jpg 

 

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="html.css" />
<title>纯css打造立体时钟</title>
<style type="text/css">
body { font-family:Arial; font-size:14px; color:#4b4b4b; text-align:center; }
* { padding:0px; margin:0px; }
#container { position:relative; margin-left:auto; margin-right:auto; width:200px; height:200px; 
margin-top:50px; overflow:hidden; background:pink;
border-radius:100px;
box-shadow: inset 0 0 2px #fff; 
background: -moz-radial-gradient(center, circle farthest-corner, rgba(168, 168, 168, 0.9) 0%, rgba(8, 8, 8, 1) 95%);
background: -o-radial-gradient(center, circle farthest-corner, rgba(168, 168, 168, 0.9) 0%, rgba(8, 8, 8, 1) 95%);
background: -webkit-gradient(radial, 100 100, 40, 100 100, 120, from(rgba(168, 168, 168, 0.9)), to(rgba(8, 8, 8, 1)));
}
#wq { line-style:none; }
#wq li { display:inline-block; font-size:18px; font-weight:bold; font-family:"Segoe UI"; text-shadow:#e8e8e8 2px 2px 1px; }
#wq li:nth-child(1){ -moz-transform:translate(87px,23px); }
#wq li:nth-child(2){ -moz-transform:rotate(30deg) translate(104px,-22px); }
#wq li:nth-child(3){ -moz-transform:rotate(60deg) translate(104px,-65px); }
#wq li:nth-child(4){ -moz-transform:translate(108px,90px); }
#wq li:nth-child(5){ -moz-transform:translate(85px,126px); }
#wq li:nth-child(6){ -moz-transform:translate(46px,150px); }
#wq li:nth-child(7){ -moz-transform:translate(-100px,100px) translate(97px,59px); }
#wq li:nth-child(8){ -moz-transform:rotate(30deg) translate(31px,154px); }
#wq li:nth-child(9){ -moz-transform:rotate(-30deg) translate(-143px,63px); }
#wq li:nth-child(10){ -moz-transform:translate(-114px,90px); }
#wq li:nth-child(11){ -moz-transform:rotate(-60deg) translate(-110px,-74px); }
#wq li:nth-child(12){ -moz-transform:rotate(-30deg) translate(-120px,-32px); }
#wq li:nth-child(1){ -webkit-transform:translate(87px,23px); }
#wq li:nth-child(2){ -webkit-transform:rotate(30deg) translate(104px,-22px); }
#wq li:nth-child(3){ -webkit-transform:rotate(60deg) translate(104px,-65px); }
#wq li:nth-child(4){ -webkit-transform:translate(108px,90px); }
#wq li:nth-child(5){ -webkit-transform:translate(85px,126px); }
#wq li:nth-child(6){ -webkit-transform:translate(46px,150px); }
#wq li:nth-child(7){ -webkit-transform:translate(-100px,100px) translate(97px,59px); }
#wq li:nth-child(8){ -webkit-transform:rotate(30deg) translate(31px,154px); }
#wq li:nth-child(9){ -webkit-transform:rotate(-30deg) translate(-143px,63px); }
#wq li:nth-child(10){ -webkit-transform:translate(-114px,90px); }
#wq li:nth-child(11){ -webkit-transform:rotate(-60deg) translate(-110px,-74px); }
#wq li:nth-child(12){ -webkit-transform:rotate(-30deg) translate(-120px,-32px); }
#wq li:nth-child(1){ -o-transform:translate(87px,23px); }
#wq li:nth-child(2){ -o-transform:rotate(30deg) translate(104px,-22px); }
#wq li:nth-child(3){ -o-transform:rotate(60deg) translate(104px,-65px); }
#wq li:nth-child(4){ -o-transform:translate(108px,90px); }
#wq li:nth-child(5){ -o-transform:translate(85px,126px); }
#wq li:nth-child(6){ -o-transform:translate(46px,150px); }
#wq li:nth-child(7){ -o-transform:translate(-100px,100px) translate(97px,59px); }
#wq li:nth-child(8){ -o-transform:rotate(30deg) translate(31px,154px); }
#wq li:nth-child(9){ -o-transform:rotate(-30deg) translate(-143px,63px); }
#wq li:nth-child(10){ -o-transform:translate(-114px,90px); }
#wq li:nth-child(11){ -o-transform:rotate(-60deg) translate(-110px,-74px); }
#wq li:nth-child(12){ -o-transform:rotate(-30deg) translate(-120px,-32px); }
#c { width:160px; height:160px;
background:seashell;
border-radius:80px;
margin-left:20px;
box-shadow:0 0 6px #fff; 
}
#author { padding-top:100px; text-shadow:#c9c9c9 3px 3px 3px; }
#s { position:relative; z-index:20; width:70px; height:3px; background:#555555;
top:-92px; left:46px;
border-radius:1px;
box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
-webkit-transform-origin:77% 50%; 
-moz-transform-origin:77% 50%;
-o-transform-origin:77% 50%;
}
#m { position:relative; z-index:19; width:60px; height:4px; background:#5d5aa5;
top:-88px; left:54px;
border-radius:2px;
box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
-webkit-transform-origin:77% 50%; 
-moz-transform-origin:75% 50%;
-o-transform-origin:77% 50%;
}
#h { position:relative; z-index:18; width:40px; height:6px; background:#ad561d;
top:-83px; left:69px;
border-radius:2px;
box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
-webkit-transform-origin:78% 50%; 
-moz-transform-origin:75% 50%;
-o-transform-origin:78% 50%;
}
#point { position:relative; z-index:21; width:16px; height:16px; top:-101px; left:92px; background:green; 
border-radius:8px;
box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
background:-moz-linear-gradient(top, rgba(200,200,200,1), rgba(113,113,113,0.9) 49%, rgba(80,80,80,1) 50%, rgba(116,116,116,1));
background:-webkit-gradient(linear, center top, center bottom, from(rgba(200,200,200,1)), color-stop(49%,rgba(113,113,113,0.9)), color-stop(50%,rgba(80,80,80,1)), to(rgba(116,116,116,1)));
background:-o-linear-gradient(top, rgba(200,200,200,1), rgba(113,113,113,0.9) 49%, rgba(80,80,80,1) 50%, rgba(116,116,116,1));
}
</style>
</head>
<body>
<div id="container">
<ul id="wq">
  <li>12</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>
<div id="c"><div id="author">Smallyoko</div></div>
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="point"></div>
</div>
<script type="text/javascript">
var hours;
var mins;
var seconds;
hours = (new Date().getHours()-12)*360/12 + 90 + "deg";
mins = new Date().getMinutes()*360/60 + 90 + "deg";
seconds = new Date().getSeconds()*360/60 + 90 + "deg";
var hh = document.getElementById('h');
var mm = document.getElementById('m');
var ss = document.getElementById('s');
var t;
hh.style.cssText = "-moz-transform:rotate("+hours+");-webkit-transform:rotate("+hours+");-o-transform:rotate("+hours+");";
mm.style.cssText = "-moz-transform:rotate("+mins+");-webkit-transform:rotate("+mins+");-o-transform:rotate("+mins+");";
ss.style.cssText = "-moz-transform:rotate("+seconds+");-webkit-transform:rotate("+seconds+");-o-transform:rotate("+seconds+");";
t = setInterval(function(){
  seconds = new Date().getSeconds()*360/60 + 90;
  mins = new Date().getMinutes()*360/60 + 90;
  ss.style.cssText = "-moz-transform:rotate("+seconds+"deg);-webkit-transform:rotate("+seconds+"deg);-o-transform:rotate("+seconds+"deg);";
  if ( seconds == 90 ){
   mm.style.cssText = "-moz-transform:rotate("+mins+"deg);-webkit-transform:rotate("+mins+"deg);-o-transform:rotate("+mins+"deg);";
  }
  if ( mins == 90 ){
   hours = new Date().getHours()*360/12 + 90 + "deg";
   hh.style.cssText = "-moz-transform:rotate("+hours+");-webkit-transform:rotate("+hours+");-o-transform:rotate("+hours+");";
  }
}, 1000);
</script>
</body> 
</html>

 

 

 

posted @ 2012-06-20 10:40  脉凌网络  阅读(858)  评论(3)  编辑  收藏  举报