Code đồng hồ CSS

  Bài viết hay nhất1
HTML:


<body>
<div id="caja">
<div id="reloj">
<div id="punteado">
<span><span><span><span><span><span><span><span><span><span>
<span><span><span><span><span><span><span><span><span><span>
<span><span><span><span><span><span><span><span><span><span>
</span></span></span></span></span></span></span></span></span></span>
</span></span></span></span></span></span></span></span></span></span>
</span></span></span></span></span></span></span></span></span></span>
<div id="rotulos">
<h3>GÀ Codes</h3>
<h4>QUARTZ</h4>
</div>
</div>
<div id="numeros">
<span style="top: 20px; left:200px;">1</span>
<span style="top: 60px; left:239px;">2</span>
<span style="top: 121px; left:260px;">3</span>
<span style="top: 175px; left:238px;">4</span>
<span style="top: 216px; left:200px;">5</span>
<span style="top: 236px; left:135px;">6</span>
<span style="top: 216px; left:69px;">7</span>
<span style="top: 175px; left:30px;">8</span>
<span style="top: 118px; left:13px;">9</span>
<span style="top: 60px; left:28px;">10</span>
<span style="top: 20px; left:65px;">11</span>
<span style="top: 1px; left:125px;">12</span>
</div>
<div class="hora"></div>
<div class="hora una"></div>
<div class="hora dos"></div>
<div class="hora tres"></div>
<div class="hora cuatro"></div>
<div class="hora cinco"></div>

<div class="min_marca" style="transform:rotate(6deg);"></div>
<div class="min_marca" style="transform:rotate(12deg);"></div>
<div class="min_marca" style="transform:rotate(18deg);"></div>
<div class="min_marca" style="transform:rotate(24deg);"></div>
<div class="min_marca" style="transform:rotate(36deg);"></div>
<div class="min_marca" style="transform:rotate(42deg);"></div>
<div class="min_marca" style="transform:rotate(48deg);"></div>
<div class="min_marca" style="transform:rotate(54deg);"></div>
<div class="min_marca" style="transform:rotate(66deg);"></div>
<div class="min_marca" style="transform:rotate(72deg);"></div>
<div class="min_marca" style="transform:rotate(78deg);"></div>
<div class="min_marca" style="transform:rotate(84deg);"></div>

<div class="min_marca" style="transform:rotate(96deg);"></div>
<div class="min_marca" style="transform:rotate(102deg);"></div>
<div class="min_marca" style="transform:rotate(108deg);"></div>
<div class="min_marca" style="transform:rotate(114deg);"></div>
<div class="min_marca" style="transform:rotate(126deg);"></div>
<div class="min_marca" style="transform:rotate(132deg);"></div>
<div class="min_marca" style="transform:rotate(138deg);"></div>
<div class="min_marca" style="transform:rotate(144deg);"></div>
<div class="min_marca" style="transform:rotate(156deg);"></div>
<div class="min_marca" style="transform:rotate(162deg);"></div>
<div class="min_marca" style="transform:rotate(168deg);"></div>
<div class="min_marca" style="transform:rotate(174deg);"></div>

<div id="agujas">
<div id="min"><div class="cubre_aguja larga"></div></div>
<div id="hour"><div class="cubre_aguja corta"></div></div>
<div id="sec"></div>
<div id="tapon"><span></span></div>
</div>
</div>

</div>
</body>




CSS:


* {margin: 0; padding:0; outline: none; border: 0; position: relative;}
body {font-family: serif; font-size: 100%; background: #FFF;}
#caja {
width: 300px;
height: 300px;
background: #121621;
border: 10px solid #666690;
margin: 0 auto;
border-radius: 20px;
}
#reloj {
background: #ECF2F2;
width:300px;
height:300px;
position:absolute;
border-radius: 10px
}
#agujas {
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: scale(3.2);
}
#agujas > div {}
#sec {
border-radius: 2px;
border-top:46px solid #990000;
height:34px;
left:0;
position:absolute;
top:-40px;
width:1px;
}
#min {
transform: rotate(45deg);
border-radius: 2px;
border-top:40px solid #121621;
height:40px;
position:absolute;
top:-40px;
left:-2px;
width:4px;
}
#hour {
transform:rotate(180deg);
border-radius: 2px;
border-top:30px solid #121621;
height:30px;
left:-2px;
position:absolute;
top:-30px;
width:4px;
}

#reloj .hora {
height:270px;
left:150px;
position:absolute;
top:15px;
}
#reloj .hora:before {
font-family:times, times New Roman;
color:#B5E1AE;
content:".";
font-size:100px;
transform:rotate(9deg);
position:absolute;
left:-8px;
top:-95px;
text-shadow:0 0 1px #000;
}
#reloj .hora:after {
font-family:times, times New Roman;
transform:rotate(9deg);
color:#B5E1AE;
content:".";
font-size:100px;
right:-17px;
position:absolute;
text-shadow:0 0 1px #000000;
bottom:-39px;
}
#reloj .min_marca {
border-bottom:5px solid #353535;
border-top:5px solid #353535;
height:288px;
left:149px;
margin:0;
position:absolute;
top:1px;
width:2px;
}
.una {transform:rotate(30deg);}
.dos {transform:rotate(60deg);}
.tres {transform:rotate(90deg);}
.cuatro {transform:rotate(120deg);}
.cinco {transform:rotate(150deg);}


#tapon {
background: #990000;
width: 6px;
height: 6px;
top:-3px;
left: -3px;
border-radius: 3px;
}
#tapon span {
border-radius: 1px;
background:#CC0000;
font-weight:100;
height:1px;
left:1px;
position:absolute;
top:2.5px;
width:4px;
}
.cubre_aguja {
border-radius:1px;
background:#B5E1AE;
width:2px;
left:1px;
position:absolute;
}
.larga {height:15px; top:-38px;}
.corta { height:10px; top: -28px;}

#numeros {
height:300px;
left:0;
position:absolute;
top:0;
width:300px;
letter-spacing:-8px;
font-family:arial;
font-weight:600;
}
#numeros span {
color:#B5E1AE;
display:block;
font-size:52px;
height:0;
letter-spacing:-9px;
width:0;
text-shadow: 1px 1px 0px rgba(0,0,0,.7);
}
#punteado {
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 0;
width: 1px;
height: 150px;
color: #121621;
}
#punteado span {
position: absolute;
margin: 0;
top: 0;
left: 0;
width:100%;
height: 100%;
background: #B7B2AE;
transform:rotate(6deg);
}
#rotulos {
position: absolute;
margin: 5px 0 0 -35px;
font-family: monospace;
text-align: center;
}
#rotulos h3 {font-size: 20px; color: #666690}
#rotulos h4 {font-size: 15px; color: #666690; margin-top:105px;}




JS:




$(document).ready(function(){
(function(){
var tick = function() {
var now = new Date();
$("#tapon").css({"-moz-transform":"rotate(" + (now.getSeconds() * 6) + "deg)","-webkit-transform":"rotate(" + (now.getSeconds() * 6) + "deg)"});
$("#sec").css({"-moz-transform":"rotate(" + (now.getSeconds() * 6) + "deg)","-webkit-transform":"rotate(" + (now.getSeconds() * 6) + "deg)"});
$("#min").css({"-moz-transform":"rotate(" + (now.getMinutes() * 6) + "deg)","-webkit-transform":"rotate(" + (now.getMinutes() * 6) + "deg)"});
$("#hour").css({"-moz-transform":"rotate(" + (now.getHours() * 30) + "deg)","-webkit-transform":"rotate(" + (now.getHours() * 30) + "deg)"});
};
setInterval(tick,1000);
})();
});
Bạn không có quyền trả lời bài viết