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%;
}
scss写的css其实很少,颜色可以随意变化,该有的注释都有