رفتن به مطلب

ویژه ساعت آنالوگ (عقربه ای) کاملا CSS

Yazdan

توسط Yazdan ،
در CSS

پست های پیشنهاد شده

Yazdan

Yazdan 1,703

ارسال شده در
ارسال شده در

سلام دوستان

 

اغلب وب مسترهای عزیز از استفاده ساعت های انالوگ فلش و مشکلات پیش رو خسته شدن و قیدش رو زدن . در این پست ساعت آنالوگ کاملا CSS با بارگزاری java رو برای عزیزان قرار منتشر میکنم.

 

 

1447000887661.png

 

 

 

کد :

 



<style>
p { margin: 0; }

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* ---------- GENERAL-CLASSES ---------- */

.container {
height: 228px;
left: 50%;
margin: -124px 0 0 -100px;
position: absolute;
top: 50%;
width: 200px;
}

/* ---------- APP ---------- */

.app {
text-align: center;
}

.app-title {
font-size: 24px;
font-weight: bold;
text-shadow: 0 5px #15181f;
}

.clock {
background: #1a1d24;
border-radius: 35px;
-webkit-box-shadow: 0 8px 0 #15181f;
box-shadow: 0 8px 0 #15181f;
height: 200px;
margin-bottom: 24px;
position: relative;
width: 200px;
}

.clock-inner {
background: #f9f9f9;
border-radius: 50%;
height: 160px;
left: 50%;
margin: -80px 0 0 -80px;
position: absolute;
top: 50%;
width: 160px;
}

.clock-center,
#clock-seconds,
#clock-minutes,
#clock-hours {
left: 50%;
position: absolute;
top: 50%;
}

.clock-center {
background: #1a1d24;
border-radius: 50%;
height: 12px;
margin: -6px 0 0 -6px;
width: 12px;
z-index: 4;
}

#clock-seconds {
background: #c40206;
border-radius: 2px;
height: 60px;
margin: -60px 0 0 -1px;
-webkit-transform-origin: 1px 60px;
-moz-transform-origin: 1px 60px;
-ms-transform-origin: 1px 60px;
-o-transform-origin: 1px 60px;
transform-origin: 1px 60px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 2px;
z-index: 3;
}

#clock-minutes {
background: #aaa;
border-radius: 4px;
height: 50px;
margin: -50px 0 0 -2px;
-webkit-transform-origin: 2px 50px;
-moz-transform-origin: 2px 50px;
-ms-transform-origin: 2px 50px;
-o-transform-origin: 2px 50px;
transform-origin: 2px 50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 4px;
z-index: 2;
}

#clock-hours {
background: #1a1d24;
border-radius: 4px;
height: 40px;
margin: -40px 0 0 -2px;
-webkit-transform-origin: 2px 40px;
-moz-transform-origin: 2px 40px;
-ms-transform-origin: 2px 40px;
-o-transform-origin: 2px 40px;
transform-origin: 2px 40px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 4px;
z-index: 1;
}

.clock-numbers {
color: #888;
display: block;
font-size: 16px;
font-weight: bold;
height: 120px;
margin: -60px 0 0 -60px;
left: 50%;
position: absolute;
top: 50%;
width: 120px;
}

.clock-numbers li {
height: 20px;
line-height: 20px;
margin: -10px;
position: absolute;
text-align: center;
width: 20px;
}

.clock-numbers li:nth-child(1) {
left: 50%;
top: 0;
}

.clock-numbers li:nth-child(2) {
right: 0;
top: 50%;
}

.clock-numbers li:nth-child(3) {
bottom: 0;
left: 50%;
}

.clock-numbers li:nth-child(4) {
left: 0;
top: 50%;
}
</style>


<link rel="stylesheet" href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است. ">

</head>
<body>

<div class="container">

<div class="app">

<div class="clock">

<div class="clock-inner">

<div class="clock-center"></div>
<div id="clock-seconds"></div>
<div id="clock-minutes"></div>
<div id="clock-hours"></div>

<ul class="clock-numbers">

<li>12</li>
<li>3</li>
<li>6</li>
<li>9</li>

</ul>

</div> <!-- end clock-inner -->

</div> <!-- end clock -->

<p class="app-title"></p>

</div> <!-- end app -->

</div> <!-- end container -->

</body>
</html>

<script>
(function() {

var clockSeconds = document.getElementById('clock-seconds'),
clockMinutes = document.getElementById('clock-minutes'),
clockHours = document.getElementById('clock-hours');

function getTime() {

var date = new Date(),
seconds = date.getSeconds(),
minutes = date.getMinutes(),
hours = date.getHours(),

degSeconds = seconds * 360 / 60,
degMinutes = (minutes + seconds / 60) * 360 / 60,
degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
}

setInterval(getTime, 1000);
getTime();

} ());
</script>






 


 



			
		


		

		
	


	

	





	
لینک به دیدگاه 

	
		
	
	
	

	
	
به اشتراک گذاری در سایت های دیگر

	

	


	

	

	









					
					
					
				

					

					
					







					
					
					
				

					

					
					







					
					
					
				

					

					
					







	

	

	

		

			


	
		kaka
	

			
		

		

			

				


kaka 
				

	
		
	
			 2
	
		
	

			

			

				ارسال شده در 
				
			

		

	









	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			ارسال شده در  
			
			
				
				
			
		

	


	

    

	

		
		

			

درود


 


ببخشید یه نمونه از من


 


 


<style type="text/css">* { margin: 0; padding: 0;}html,body { width: 100%; height: 100%; margin: 0; padding: 0; float: left;}html { background-color: #c2c2c2;}#clock { position: relative; width: 450px; height: 450px; margin: 100px auto 0 auto; list-style: none; border: solid #1f1f1f 12px; background-color: #2e2e2e; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}#clock:before { content: ''; display: block; position: absolute; z-index: 0; width: 30px; height: 30px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; left: 0; right: 0; margin: auto; background-color: #1f1f1f; margin-top: 215px;}#clock:after { content: ''; display: block; position: absolute; z-index: 200; width: 20px; height: 20px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; left: 0; right: 0; margin: 220px auto; background: #000;}#sec, #min, #hour { position: absolute; width: 20px; height: 120px; top: 0px; left: 0; right: 0; margin: 37px auto; color: #278aec; z-index: 5;}#sec { display: block; width: 2px; height: 228px; margin: auto; background: #4d4d4d; z-index: 5; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;}#min { width: 7px; height: 195px; background: #1f1f1f; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; z-index: 3; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;}#hour { width: 10px; height: 125px; background: #1f1f1f; margin-top: 105px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; z-index: 3; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;}i { z-index: -20; position: absolute; font-family: 'Lobster', cursive; font-weight: 300; color: #4d4d4d; font-size: 80px; z-index:1; -webkit-user-select: none;}.si { margin-left: 25px; margin-top: 175px; z-index: 1;}.ni { margin-left: 195px; margin-top: 340px; z-index: 1;}.th { margin-left: 370px; margin-top: 175px; z-index: 1;}.name { position: absolute; margin: 3em 4em; z-index: 3; width: 200px;}.name:before { content: attr(data-name); color: #4d4d4d; font-size: 70px; margin-left: 50px; text-align: center; width: 100%; display: block; font-family: 'Lobster', cursive;}</style><!-- BluNeon Clock --><!-- Load Lobester Typeface --><link href='https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.   rel='stylesheet' type='text/css'><ul id="clock"> <span class="name" data-name="bluneon"></span> <li id="sec"></li> <li id="hour"></li> <li id="min"></li> <i class="th">3</i> <i class="si">9</i> <i class="ni">6</i></ul><!-- Load jQuery Script --><script src="http://code.jquery.com/jquery-latest.min.js"></script><script> $(document).ready(function() {             setInterval( function() {             var seconds = new Date().getSeconds();             var sdegree = seconds * 6;             var srotate = "rotate(" + sdegree + "deg)";             $("&anchor=sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});             }, 1000 );             setInterval( function() {             var hours = new Date().getHours();             var mins = new Date().getMinutes();             var hdegree = hours * 30 + (mins / 2);             var hrotate = "rotate(" + hdegree + "deg)";             $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});             }, 1000 );             setInterval( function() {             var mins = new Date().getMinutes();             var mdegree = mins * 6;             var mrotate = "rotate(" + mdegree + "deg)";             $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});             }, 1000 );});</script>




 


 


 


                                                                           لینک ها تنها برای اعضای سایت قابل نمایش است.  



			
		


		

		
	


	

	





	
لینک به دیدگاه 

	
		
	
	
	

	
	
به اشتراک گذاری در سایت های دیگر

	

	


	

	

	









					
					
					
				
			
			



		

	


	
	
	
		

			
بایگانی شده

			

				این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.
			

		

	
	
	
		
		

			
				
					


	


	
		مهمان
	


	

		

			 این موضوع  برای عدم ارسال قفل گردیده است. 
		
			
		

	



				
			
		

	

	







	

		
			
				رفتن به فهرست موضوع ها
			
		
	

	




						


					

					



				

			

			
		

		
			
			



	

		×
		

			
				

					
				

			

			

			
		

	






	

		×
		

			
    
				
  • اضافه کردن...
    •