Html
    Css
    Js

    
                        
em,i,b,dt,dl,dd {
	display:inline-block;
	font-weight:inherit;
	font-style:normal;
}
.big {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.count {
	position:relative;
	width:800px;
	height:800px;
	margin:0 auto;
}
.count > div {
	position:absolute;
	top:386px;
	transform-origin:100% 50%;
	-ms-transform-origin:100% 50%;
	-webkit-transform-origin:100% 50%;
	width:400px;
	height:30px;
	background:rgba(120,120,120,0.2);
}
.count *:after {
	display:inline-block;
	position:absolute;
	top:14px;
	content:'';
}
.count em {
	display:block;
	position:absolute;
	top:0;
	left:40px;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
}
.count * {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.clk-0 {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
.clk-0:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-1 {
	transform:rotate(96deg);
	-ms-transform:rotate(96deg);
	-webkit-transform:rotate(96deg);
}
.clk-1:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-2 {
	transform:rotate(102deg);
	-ms-transform:rotate(102deg);
	-webkit-transform:rotate(102deg);
}
.clk-2:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-3 {
	transform:rotate(108deg);
	-ms-transform:rotate(108deg);
	-webkit-transform:rotate(108deg);
}
.clk-3:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-4 {
	transform:rotate(114deg);
	-ms-transform:rotate(114deg);
	-webkit-transform:rotate(114deg);
}
.clk-4:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-5 {
	transform:rotate(120deg);
	-ms-transform:rotate(120deg);
	-webkit-transform:rotate(120deg);
}
.clk-5:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-6 {
	transform:rotate(126deg);
	-ms-transform:rotate(126deg);
	-webkit-transform:rotate(126deg);
}
.clk-6:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-7 {
	transform:rotate(132deg);
	-ms-transform:rotate(132deg);
	-webkit-transform:rotate(132deg);
}
.clk-7:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-8 {
	transform:rotate(138deg);
	-ms-transform:rotate(138deg);
	-webkit-transform:rotate(138deg);
}
.clk-8:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-9 {
	transform:rotate(144deg);
	-ms-transform:rotate(144deg);
	-webkit-transform:rotate(144deg);
}
.clk-9:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-10 {
	transform:rotate(150deg);
	-ms-transform:rotate(150deg);
	-webkit-transform:rotate(150deg);
}
.clk-10:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-11 {
	transform:rotate(156deg);
	-ms-transform:rotate(156deg);
	-webkit-transform:rotate(156deg);
}
.clk-11:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-12 {
	transform:rotate(162deg);
	-ms-transform:rotate(162deg);
	-webkit-transform:rotate(162deg);
}
.clk-12:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-13 {
	transform:rotate(168deg);
	-ms-transform:rotate(168deg);
	-webkit-transform:rotate(168deg);
}
.clk-13:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-14 {
	transform:rotate(174deg);
	-ms-transform:rotate(174deg);
	-webkit-transform:rotate(174deg);
}
.clk-14:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-15 {
	transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}
.clk-15:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-16 {
	transform:rotate(186deg);
	-ms-transform:rotate(186deg);
	-webkit-transform:rotate(186deg);
}
.clk-16:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-17 {
	transform:rotate(192deg);
	-ms-transform:rotate(192deg);
	-webkit-transform:rotate(192deg);
}
.clk-17:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-18 {
	transform:rotate(198deg);
	-ms-transform:rotate(198deg);
	-webkit-transform:rotate(198deg);
}
.clk-18:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-19 {
	transform:rotate(204deg);
	-ms-transform:rotate(204deg);
	-webkit-transform:rotate(204deg);
}
.clk-19:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-20 {
	transform:rotate(210deg);
	-ms-transform:rotate(210deg);
	-webkit-transform:rotate(210deg);
}
.clk-20:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-21 {
	transform:rotate(216deg);
	-ms-transform:rotate(216deg);
	-webkit-transform:rotate(216deg);
}
.clk-21:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-22 {
	transform:rotate(222deg);
	-ms-transform:rotate(222deg);
	-webkit-transform:rotate(222deg);
}
.clk-22:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-23 {
	transform:rotate(228deg);
	-ms-transform:rotate(228deg);
	-webkit-transform:rotate(228deg);
}
.clk-23:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-24 {
	transform:rotate(234deg);
	-ms-transform:rotate(234deg);
	-webkit-transform:rotate(234deg);
}
.clk-24:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-25 {
	transform:rotate(240deg);
	-ms-transform:rotate(240deg);
	-webkit-transform:rotate(240deg);
}
.clk-25:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-26 {
	transform:rotate(246deg);
	-ms-transform:rotate(246deg);
	-webkit-transform:rotate(246deg);
}
.clk-26:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-27 {
	transform:rotate(252deg);
	-ms-transform:rotate(252deg);
	-webkit-transform:rotate(252deg);
}
.clk-27:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-28 {
	transform:rotate(258deg);
	-ms-transform:rotate(258deg);
	-webkit-transform:rotate(258deg);
}
.clk-28:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-29 {
	transform:rotate(264deg);
	-ms-transform:rotate(264deg);
	-webkit-transform:rotate(264deg);
}
.clk-29:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-30 {
	transform:rotate(270deg);
	-ms-transform:rotate(270deg);
	-webkit-transform:rotate(270deg);
}
.clk-30:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-31 {
	transform:rotate(276deg);
	-ms-transform:rotate(276deg);
	-webkit-transform:rotate(276deg);
}
.clk-31:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-32 {
	transform:rotate(282deg);
	-ms-transform:rotate(282deg);
	-webkit-transform:rotate(282deg);
}
.clk-32:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-33 {
	transform:rotate(288deg);
	-ms-transform:rotate(288deg);
	-webkit-transform:rotate(288deg);
}
.clk-33:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-34 {
	transform:rotate(294deg);
	-ms-transform:rotate(294deg);
	-webkit-transform:rotate(294deg);
}
.clk-34:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-35 {
	transform:rotate(300deg);
	-ms-transform:rotate(300deg);
	-webkit-transform:rotate(300deg);
}
.clk-35:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-36 {
	transform:rotate(306deg);
	-ms-transform:rotate(306deg);
	-webkit-transform:rotate(306deg);
}
.clk-36:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-37 {
	transform:rotate(312deg);
	-ms-transform:rotate(312deg);
	-webkit-transform:rotate(312deg);
}
.clk-37:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-38 {
	transform:rotate(318deg);
	-ms-transform:rotate(318deg);
	-webkit-transform:rotate(318deg);
}
.clk-38:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-39 {
	transform:rotate(324deg);
	-ms-transform:rotate(324deg);
	-webkit-transform:rotate(324deg);
}
.clk-39:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-40 {
	transform:rotate(330deg);
	-ms-transform:rotate(330deg);
	-webkit-transform:rotate(330deg);
}
.clk-40:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-41 {
	transform:rotate(336deg);
	-ms-transform:rotate(336deg);
	-webkit-transform:rotate(336deg);
}
.clk-41:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-42 {
	transform:rotate(342deg);
	-ms-transform:rotate(342deg);
	-webkit-transform:rotate(342deg);
}
.clk-42:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-43 {
	transform:rotate(348deg);
	-ms-transform:rotate(348deg);
	-webkit-transform:rotate(348deg);
}
.clk-43:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-44 {
	transform:rotate(354deg);
	-ms-transform:rotate(354deg);
	-webkit-transform:rotate(354deg);
}
.clk-44:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-45 {
	transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
}
.clk-45:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-46 {
	transform:rotate(366deg);
	-ms-transform:rotate(366deg);
	-webkit-transform:rotate(366deg);
}
.clk-46:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-47 {
	transform:rotate(372deg);
	-ms-transform:rotate(372deg);
	-webkit-transform:rotate(372deg);
}
.clk-47:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-48 {
	transform:rotate(378deg);
	-ms-transform:rotate(378deg);
	-webkit-transform:rotate(378deg);
}
.clk-48:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-49 {
	transform:rotate(384deg);
	-ms-transform:rotate(384deg);
	-webkit-transform:rotate(384deg);
}
.clk-49:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-50 {
	transform:rotate(390deg);
	-ms-transform:rotate(390deg);
	-webkit-transform:rotate(390deg);
}
.clk-50:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-51 {
	transform:rotate(396deg);
	-ms-transform:rotate(396deg);
	-webkit-transform:rotate(396deg);
}
.clk-51:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-52 {
	transform:rotate(402deg);
	-ms-transform:rotate(402deg);
	-webkit-transform:rotate(402deg);
}
.clk-52:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-53 {
	transform:rotate(408deg);
	-ms-transform:rotate(408deg);
	-webkit-transform:rotate(408deg);
}
.clk-53:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-54 {
	transform:rotate(414deg);
	-ms-transform:rotate(414deg);
	-webkit-transform:rotate(414deg);
}
.clk-54:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-55 {
	transform:rotate(420deg);
	-ms-transform:rotate(420deg);
	-webkit-transform:rotate(420deg);
}
.clk-55:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-56 {
	transform:rotate(426deg);
	-ms-transform:rotate(426deg);
	-webkit-transform:rotate(426deg);
}
.clk-56:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-57 {
	transform:rotate(432deg);
	-ms-transform:rotate(432deg);
	-webkit-transform:rotate(432deg);
}
.clk-57:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-58 {
	transform:rotate(438deg);
	-ms-transform:rotate(438deg);
	-webkit-transform:rotate(438deg);
}
.clk-58:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-59 {
	transform:rotate(444deg);
	-ms-transform:rotate(444deg);
	-webkit-transform:rotate(444deg);
}
.clk-59:after {
	width:10px;
	height:2px;
	background:#000;
}
.clk-0 {
	font-size:30px;
}
.clk-0:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-0 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
}
.clk-5 {
	font-size:30px;
}
.clk-5:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-5 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-120deg);
	-ms-transform:rotate(-120deg);
	-webkit-transform:rotate(-120deg);
}
.clk-10 {
	font-size:30px;
}
.clk-10:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-10 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-150deg);
	-ms-transform:rotate(-150deg);
	-webkit-transform:rotate(-150deg);
}
.clk-15 {
	font-size:30px;
}
.clk-15:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-15 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-webkit-transform:rotate(-180deg);
}
.clk-20 {
	font-size:30px;
}
.clk-20:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-20 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-210deg);
	-ms-transform:rotate(-210deg);
	-webkit-transform:rotate(-210deg);
}
.clk-25 {
	font-size:30px;
}
.clk-25:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-25 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-240deg);
	-ms-transform:rotate(-240deg);
	-webkit-transform:rotate(-240deg);
}
.clk-30 {
	font-size:30px;
}
.clk-30:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-30 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-270deg);
	-ms-transform:rotate(-270deg);
	-webkit-transform:rotate(-270deg);
}
.clk-35 {
	font-size:30px;
}
.clk-35:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-35 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-300deg);
	-ms-transform:rotate(-300deg);
	-webkit-transform:rotate(-300deg);
}
.clk-40 {
	font-size:30px;
}
.clk-40:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-40 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-330deg);
	-ms-transform:rotate(-330deg);
	-webkit-transform:rotate(-330deg);
}
.clk-45 {
	font-size:30px;
}
.clk-45:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-45 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-360deg);
	-ms-transform:rotate(-360deg);
	-webkit-transform:rotate(-360deg);
}
.clk-50 {
	font-size:30px;
}
.clk-50:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-50 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-390deg);
	-ms-transform:rotate(-390deg);
	-webkit-transform:rotate(-390deg);
}
.clk-55 {
	font-size:30px;
}
.clk-55:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-55 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-420deg);
	-ms-transform:rotate(-420deg);
	-webkit-transform:rotate(-420deg);
}
.clk-60 {
	font-size:30px;
}
.clk-60:after {
	top:13px;
	width:30px;
	height:4px;
	background:#000;
}
.clk-60 > em {
	transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform:rotate(-450deg);
	-ms-transform:rotate(-450deg);
	-webkit-transform:rotate(-450deg);
}
div.hour,div.min,div.sec {
	position:absolute;
	top:400px;
	left:0;
	width:400px;
	height:2px;
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
div.hour b,div.min b,div.sec b {
	position:absolute;
	top:-1px;
	right:0;
	height:100%;
	border-radius:10px;
	transform-origin:100% 50%;
	-ms-transform-origin:100% 50%;
	-webkit-transform-origin:100% 50%;
}
div.hour b {
	width:40%;
	background:#00f;
	height:6px;
	top:-3px;
}
div.min b {
	width:50%;
	background:#0f0;
	height:4px;
	top:-2px;
}
div.sec b {
	width:70%;
	background:#f00;
	right:-10%;
	transform-origin:85.71429% 50%;
	-ms-transform-origin:85.71429% 50%;
	-webkit-transform-origin:85.71429% 50%;
}
div.sec:after {
	content:'';
	position:absolute;
	top:-10px;
	right:-10px;
	width:20px;
	height:20px;
	background:#f00;
	border-radius:50%;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

背景色随机时钟

scss写的css其实很少,颜色可以随意变化,该有的注释都有

0