themetr - yesilkedilisaat

ThemeTR - Ücretsiz CSS Tasarım & CSS Paylaşım Sitesi

Ucretsiz Destek

Ucretli Tasarım

CSS Tasarımlar (11)

Reklamlardan Kurtulun!

Yorum Bırakın

Ücretsiz css destek istersen ekle Skype: baris_selcuk_sahin@hotmail.com & Barış Şahin

yesilkedilisaat

Yeşil Kedili Saat :

<style>
body {
	margin: 0px;
}
* {
	margin: 0;
	padding: 0;
}
#tasiyici {
	width: 500px;
	margin: 0 auto;
}
#kedicik {
	position: relative;
	width: 500px;
	height: 500px;
	margin: 0px auto 0 auto;
	background: url(http://i.imgur.com/JlN5hWn.png);
	background-repeat: no-repeat;
	list-style: none;
	overflow: hidden;
}
#saniye, #dakika, #saat {
	position: absolute;
	width: 30px;
	height: 600px;
	top: 0px;
	left: 230px;
}
#saniye {
	background: url(http://i.imgur.com/UPbQdEH.png);
	z-index: 3;
	max-height: -3px;
}
#dakika {
	background: url(http://i.imgur.com/vN0YPdR.png);
	z-index: 2;
}
#saat {
	background: url(http://i.imgur.com/k2GXvTI.png);
	z-index: 1;
}
#gozler {
	margin: 274px 0px 0px 276px;
	z-index: 1;
	position: absolute;
}
.goz-sol {
	background-image: url('http://i.imgur.com/gNOGfre.png');
	background-repeat:no-repeat;
	width: 12px;
	height: 13px;
	float: left;
	margin-right:5px;
	margin-left:1px;
}
.goz-sag {
	background-image: url('http://i.imgur.com/gNOGfre.png');
	background-repeat:no-repeat;
	width: 12px;
	height: 13px;
	float: left;
	margin-right:5px;
	margin-left:2px;
}
.ileri-sol {
	margin-left:5px;
}.ileri-sag {
	margin-left:3px;
}
</style>
<script src="http://www.fileden.com/files/2012/1/30/3257087/yesilkedisaatijquery.java" type="text/javascript"></script>
<script type="text/javascript">
    
        $(document).ready(function() {
         
              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";
              
            	$("#saniye").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
				$(".goz-sol").toggleClass("ileri-sol");
				$(this).siblings(".goz-sol").removeClass("ileri-sol");                
            
			  }, 1000 );
              
         
              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";
              
              $("#saat").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
                  
              }, 1000 );
        
        
              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = "rotate(" + mdegree + "deg)";
              
              $("#dakika").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
                  
              }, 1000 );
         
        }); 
    
    </script>
</head>
<body>
<div id="tasiyici">
	<div id="gozler" class="">
		<div class="goz-sol">
		</div>
		<div class="goz-sag">
		</div>
	</div>
	<ul id="kedicik">
		<li id="saniye"></li>
		<li id="saat"></li>
		<li id="dakika"></li>
	</ul>
</div>

THEMETR © 2012 Tüm Hakları Saklıdır

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol