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