برچسب ساعت فول css - مرجع بلاگ اسکای

کد ساعت فول css

تمام کد هایی که برای گذاشتن ساعت در اینترنت پیدا کنید ، همه بصورت فلش درست شده و برای سرعت لود و سئوی سایت ضرر دارد

برای اولین بار در یک کد، ساعت فول css گذاشتم تا در عین زیبایی و شیک بودن برای سئو نیز ضرری ندارد.

دمو این ساعت را در اینجا ببینید : http://jsfiddle.net/mhmk/QgbNB/embedded/result/

برای استفاده، کد زیر را در جایی که میخواهید قرار دهید:

</ul>

</div>

</div> 
		</div>

</div>

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>

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>

کد ساعت کد ساعت برای وبلاگ ساعت فول css ساعت زیبا برای وبلاگ

محمد حسین پنج‌شنبه 17 مرداد 1392 ساعت 00:46

0 نظر

مرجع بلاگ اسکای

مرجع بلاگ اسکای

محمد حسین مشمول

نظرسنجی

کد ساعت فول css

مرجع بلاگ اسکای

محمد حسین مشمول

نظرسنجی

پیوندها

دسته‌ها

ابر برجسب

برگه‌ها

جدیدترین یادداشت‌ها

نویسندگان

بایگانی

جستجو

کد ساعت فول css