纯CSS3打造动态时钟
本来想看看有没有人用CSS3画时钟,结果百度了一下,点了七八个链接都是一样的内容,真是太没劲了,这些家伙只知道粘贴复制别人的,还是应该自己动手做一下撒!
于是就自己DIY了一个,发现CSS3越来越强大了,任何你想画的东西,想做的效果,只要你动手再加上点耐力,一定能搞出来的!无外乎就是各种形状的组合,慢慢拼呗,只要你时间多!
来吧,宝贝,别害怕也别害羞,抓起你手中的鼠标,端起你手中的键盘,猛敲吧,告诉别人,I can code!
下面是效果图 :
<!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>
站长帮手:在网络的世界里,我感觉自己无把不能。