马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
这个时钟设计既美观又富有创意，将传统时钟的功能与现代web技术相结合，创造出了一个视觉上吸引人且功能性强的界面效果。
当新的一秒、一分钟或一小时开始时，相应的数字会瞬间从圆周边缘移动到中心位置，创造出一种时间流动的视觉韵律。通过动态变化和颜色对比增强了用户体验，使得查看时间成为一种赏心悦目的体验。
实现原理主要包括：
- 使用CSS的transform属性将数字排列成圆形。
- 利用JavaScript的setInterval函数每秒获取当前时间。
- 通过添加和移除CSS类来高亮显示当前时间对应的数字。
- 使用CSS过渡效果使数字的变化更加平滑。
创作来源：learning haml and compass / Jonas Giuro
使用方式
复制源代码到空白的html格式文件，在浏览中打开运行即可。
源代码
可上下滑动查看完整源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: black;
color: white;
font-family: Helvetica Neue, Helvetica, Arial, Verdana;
font-weight: 100;
}
body .clock-round {
margin: 0 auto;
position: relative;
width: 840px;
height: 840px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
body .clock-round .hours {
font-size: 40px;
}
body .clock-round .hours span {
display: block;
position: absolute;
left: 400px;
text-align: center;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transform-origin: center 400px;
-ms-transform-origin: center 400px;
-webkit-transform-origin: center 400px;
transform-origin: center 400px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
body .clock-round .hours span.active {
color: yellow;
-moz-transform-origin: center 0;
-ms-transform-origin: center 0;
-webkit-transform-origin: center 0;
transform-origin: center 0;
-moz-transform: rotate(0) !important;
-ms-transform: rotate(0) !important;
-webkit-transform: rotate(0) !important;
transform: rotate(0) !important;
text-shadow: yellow 0px 0px 5px;
font-size: 50px;
top: 300px;
left: 320px;
}
body .clock-round .hours span:nth-child(1) {
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
body .clock-round .hours span:nth-child(2) {
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
body .clock-round .hours span:nth-child(3) {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
body .clock-round .hours span:nth-child(4) {
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
body .clock-round .hours span:nth-child(5) {
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
body .clock-round .hours span:nth-child(6) {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
body .clock-round .hours span:nth-child(7) {
-moz-transform: rotate(210deg);
-ms-transform: rotate(210deg);
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
body .clock-round .hours span:nth-child(8) {
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
body .clock-round .hours span:nth-child(9) {
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
body .clock-round .hours span:nth-child(10) {
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
body .clock-round .hours span:nth-child(11) {
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
}
body .clock-round .hours span:nth-child(12) {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
body .clock-round .minutes {
font-size: 20px;
}
body .clock-round .minutes span {
display: block;
position: absolute;
left: 400px;
top: 100px;
width: 50px;
text-align: center;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transform-origin: center 300px;
-ms-transform-origin: center 300px;
-webkit-transform-origin: center 300px;
transform-origin: center 300px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
body .clock-round .minutes span.active-minute {
color: orange;
font-size: 50px;
top: 300px;
left: 400px;
-moz-transform-origin: center 0;
-ms-transform-origin: center 0;
-webkit-transform-origin: center 0;
transform-origin: center 0;
-moz-transform: rotate(0) !important;
-ms-transform: rotate(0) !important;
-webkit-transform: rotate(0) !important;
transform: rotate(0) !important;
text-shadow: orange 0px 0px 5px;
}
body .clock-round .minutes span.active-second {
color: red;
font-size: 50px;
-moz-transform-origin: center 0;
-ms-transform-origin: center 0;
-webkit-transform-origin: center 0;
transform-origin: center 0;
-moz-transform: rotate(0) !important;
-ms-transform: rotate(0) !important;
-webkit-transform: rotate(0) !important;
transform: rotate(0) !important;
text-shadow: red 0px 0px 5px;
top: 300px;
left: 480px;
}
body .clock-round .minutes span:nth-child(1) {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
body .clock-round .minutes span:nth-child(1).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(1).active-minute.active-second:after {
content: "0";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(2) {
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
body .clock-round .minutes span:nth-child(2).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(2).active-minute.active-second:after {
content: "1";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(3) {
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
body .clock-round .minutes span:nth-child(3).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(3).active-minute.active-second:after {
content: "2";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(4) {
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
body .clock-round .minutes span:nth-child(4).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(4).active-minute.active-second:after {
content: "3";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(5) {
-moz-transform: rotate(24deg);
-ms-transform: rotate(24deg);
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
body .clock-round .minutes span:nth-child(5).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(5).active-minute.active-second:after {
content: "4";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(6) {
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
body .clock-round .minutes span:nth-child(6).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(6).active-minute.active-second:after {
content: "5";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(7) {
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
body .clock-round .minutes span:nth-child(7).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(7).active-minute.active-second:after {
content: "6";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(8) {
-moz-transform: rotate(42deg);
-ms-transform: rotate(42deg);
-webkit-transform: rotate(42deg);
transform: rotate(42deg);
}
body .clock-round .minutes span:nth-child(8).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(8).active-minute.active-second:after {
content: "7";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(9) {
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-webkit-transform: rotate(48deg);
transform: rotate(48deg);
}
body .clock-round .minutes span:nth-child(9).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(9).active-minute.active-second:after {
content: "8";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(10) {
-moz-transform: rotate(54deg);
-ms-transform: rotate(54deg);
-webkit-transform: rotate(54deg);
transform: rotate(54deg);
}
body .clock-round .minutes span:nth-child(10).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(10).active-minute.active-second:after {
content: "9";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(11) {
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
body .clock-round .minutes span:nth-child(11).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(11).active-minute.active-second:after {
content: "10";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(12) {
-moz-transform: rotate(66deg);
-ms-transform: rotate(66deg);
-webkit-transform: rotate(66deg);
transform: rotate(66deg);
}
body .clock-round .minutes span:nth-child(12).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(12).active-minute.active-second:after {
content: "11";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(13) {
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
}
body .clock-round .minutes span:nth-child(13).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(13).active-minute.active-second:after {
content: "12";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(14) {
-moz-transform: rotate(78deg);
-ms-transform: rotate(78deg);
-webkit-transform: rotate(78deg);
transform: rotate(78deg);
}
body .clock-round .minutes span:nth-child(14).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(14).active-minute.active-second:after {
content: "13";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(15) {
-moz-transform: rotate(84deg);
-ms-transform: rotate(84deg);
-webkit-transform: rotate(84deg);
transform: rotate(84deg);
}
body .clock-round .minutes span:nth-child(15).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(15).active-minute.active-second:after {
content: "14";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(16) {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
body .clock-round .minutes span:nth-child(16).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(16).active-minute.active-second:after {
content: "15";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(17) {
-moz-transform: rotate(96deg);
-ms-transform: rotate(96deg);
-webkit-transform: rotate(96deg);
transform: rotate(96deg);
}
body .clock-round .minutes span:nth-child(17).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(17).active-minute.active-second:after {
content: "16";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(18) {
-moz-transform: rotate(102deg);
-ms-transform: rotate(102deg);
-webkit-transform: rotate(102deg);
transform: rotate(102deg);
}
body .clock-round .minutes span:nth-child(18).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(18).active-minute.active-second:after {
content: "17";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(19) {
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform: rotate(108deg);
}
body .clock-round .minutes span:nth-child(19).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(19).active-minute.active-second:after {
content: "18";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(20) {
-moz-transform: rotate(114deg);
-ms-transform: rotate(114deg);
-webkit-transform: rotate(114deg);
transform: rotate(114deg);
}
body .clock-round .minutes span:nth-child(20).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(20).active-minute.active-second:after {
content: "19";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(21) {
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
body .clock-round .minutes span:nth-child(21).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(21).active-minute.active-second:after {
content: "20";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(22) {
-moz-transform: rotate(126deg);
-ms-transform: rotate(126deg);
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
body .clock-round .minutes span:nth-child(22).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(22).active-minute.active-second:after {
content: "21";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(23) {
-moz-transform: rotate(132deg);
-ms-transform: rotate(132deg);
-webkit-transform: rotate(132deg);
transform: rotate(132deg);
}
body .clock-round .minutes span:nth-child(23).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(23).active-minute.active-second:after {
content: "22";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(24) {
-moz-transform: rotate(138deg);
-ms-transform: rotate(138deg);
-webkit-transform: rotate(138deg);
transform: rotate(138deg);
}
body .clock-round .minutes span:nth-child(24).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(24).active-minute.active-second:after {
content: "23";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(25) {
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
body .clock-round .minutes span:nth-child(25).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(25).active-minute.active-second:after {
content: "24";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(26) {
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
body .clock-round .minutes span:nth-child(26).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(26).active-minute.active-second:after {
content: "25";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(27) {
-moz-transform: rotate(156deg);
-ms-transform: rotate(156deg);
-webkit-transform: rotate(156deg);
transform: rotate(156deg);
}
body .clock-round .minutes span:nth-child(27).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(27).active-minute.active-second:after {
content: "26";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(28) {
-moz-transform: rotate(162deg);
-ms-transform: rotate(162deg);
-webkit-transform: rotate(162deg);
transform: rotate(162deg);
}
body .clock-round .minutes span:nth-child(28).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(28).active-minute.active-second:after {
content: "27";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(29) {
-moz-transform: rotate(168deg);
-ms-transform: rotate(168deg);
-webkit-transform: rotate(168deg);
transform: rotate(168deg);
}
body .clock-round .minutes span:nth-child(29).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(29).active-minute.active-second:after {
content: "28";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(30) {
-moz-transform: rotate(174deg);
-ms-transform: rotate(174deg);
-webkit-transform: rotate(174deg);
transform: rotate(174deg);
}
body .clock-round .minutes span:nth-child(30).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(30).active-minute.active-second:after {
content: "29";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(31) {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
body .clock-round .minutes span:nth-child(31).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(31).active-minute.active-second:after {
content: "30";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(32) {
-moz-transform: rotate(186deg);
-ms-transform: rotate(186deg);
-webkit-transform: rotate(186deg);
transform: rotate(186deg);
}
body .clock-round .minutes span:nth-child(32).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(32).active-minute.active-second:after {
content: "31";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(33) {
-moz-transform: rotate(192deg);
-ms-transform: rotate(192deg);
-webkit-transform: rotate(192deg);
transform: rotate(192deg);
}
body .clock-round .minutes span:nth-child(33).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(33).active-minute.active-second:after {
content: "32";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(34) {
-moz-transform: rotate(198deg);
-ms-transform: rotate(198deg);
-webkit-transform: rotate(198deg);
transform: rotate(198deg);
}
body .clock-round .minutes span:nth-child(34).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(34).active-minute.active-second:after {
content: "33";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(35) {
-moz-transform: rotate(204deg);
-ms-transform: rotate(204deg);
-webkit-transform: rotate(204deg);
transform: rotate(204deg);
}
body .clock-round .minutes span:nth-child(35).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(35).active-minute.active-second:after {
content: "34";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(36) {
-moz-transform: rotate(210deg);
-ms-transform: rotate(210deg);
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
body .clock-round .minutes span:nth-child(36).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(36).active-minute.active-second:after {
content: "35";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(37) {
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
}
body .clock-round .minutes span:nth-child(37).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(37).active-minute.active-second:after {
content: "36";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(38) {
-moz-transform: rotate(222deg);
-ms-transform: rotate(222deg);
-webkit-transform: rotate(222deg);
transform: rotate(222deg);
}
body .clock-round .minutes span:nth-child(38).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(38).active-minute.active-second:after {
content: "37";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(39) {
-moz-transform: rotate(228deg);
-ms-transform: rotate(228deg);
-webkit-transform: rotate(228deg);
transform: rotate(228deg);
}
body .clock-round .minutes span:nth-child(39).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(39).active-minute.active-second:after {
content: "38";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(40) {
-moz-transform: rotate(234deg);
-ms-transform: rotate(234deg);
-webkit-transform: rotate(234deg);
transform: rotate(234deg);
}
body .clock-round .minutes span:nth-child(40).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(40).active-minute.active-second:after {
content: "39";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(41) {
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
body .clock-round .minutes span:nth-child(41).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(41).active-minute.active-second:after {
content: "40";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(42) {
-moz-transform: rotate(246deg);
-ms-transform: rotate(246deg);
-webkit-transform: rotate(246deg);
transform: rotate(246deg);
}
body .clock-round .minutes span:nth-child(42).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(42).active-minute.active-second:after {
content: "41";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(43) {
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-webkit-transform: rotate(252deg);
transform: rotate(252deg);
}
body .clock-round .minutes span:nth-child(43).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(43).active-minute.active-second:after {
content: "42";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(44) {
-moz-transform: rotate(258deg);
-ms-transform: rotate(258deg);
-webkit-transform: rotate(258deg);
transform: rotate(258deg);
}
body .clock-round .minutes span:nth-child(44).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(44).active-minute.active-second:after {
content: "43";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(45) {
-moz-transform: rotate(264deg);
-ms-transform: rotate(264deg);
-webkit-transform: rotate(264deg);
transform: rotate(264deg);
}
body .clock-round .minutes span:nth-child(45).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(45).active-minute.active-second:after {
content: "44";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(46) {
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
body .clock-round .minutes span:nth-child(46).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(46).active-minute.active-second:after {
content: "45";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(47) {
-moz-transform: rotate(276deg);
-ms-transform: rotate(276deg);
-webkit-transform: rotate(276deg);
transform: rotate(276deg);
}
body .clock-round .minutes span:nth-child(47).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(47).active-minute.active-second:after {
content: "46";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(48) {
-moz-transform: rotate(282deg);
-ms-transform: rotate(282deg);
-webkit-transform: rotate(282deg);
transform: rotate(282deg);
}
body .clock-round .minutes span:nth-child(48).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(48).active-minute.active-second:after {
content: "47";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(49) {
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
}
body .clock-round .minutes span:nth-child(49).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(49).active-minute.active-second:after {
content: "48";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(50) {
-moz-transform: rotate(294deg);
-ms-transform: rotate(294deg);
-webkit-transform: rotate(294deg);
transform: rotate(294deg);
}
body .clock-round .minutes span:nth-child(50).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(50).active-minute.active-second:after {
content: "49";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(51) {
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
body .clock-round .minutes span:nth-child(51).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(51).active-minute.active-second:after {
content: "50";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(52) {
-moz-transform: rotate(306deg);
-ms-transform: rotate(306deg);
-webkit-transform: rotate(306deg);
transform: rotate(306deg);
}
body .clock-round .minutes span:nth-child(52).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(52).active-minute.active-second:after {
content: "51";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(53) {
-moz-transform: rotate(312deg);
-ms-transform: rotate(312deg);
-webkit-transform: rotate(312deg);
transform: rotate(312deg);
}
body .clock-round .minutes span:nth-child(53).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(53).active-minute.active-second:after {
content: "52";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(54) {
-moz-transform: rotate(318deg);
-ms-transform: rotate(318deg);
-webkit-transform: rotate(318deg);
transform: rotate(318deg);
}
body .clock-round .minutes span:nth-child(54).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(54).active-minute.active-second:after {
content: "53";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(55) {
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-webkit-transform: rotate(324deg);
transform: rotate(324deg);
}
body .clock-round .minutes span:nth-child(55).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(55).active-minute.active-second:after {
content: "54";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(56) {
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
}
body .clock-round .minutes span:nth-child(56).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(56).active-minute.active-second:after {
content: "55";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(57) {
-moz-transform: rotate(336deg);
-ms-transform: rotate(336deg);
-webkit-transform: rotate(336deg);
transform: rotate(336deg);
}
body .clock-round .minutes span:nth-child(57).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(57).active-minute.active-second:after {
content: "56";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(58) {
-moz-transform: rotate(342deg);
-ms-transform: rotate(342deg);
-webkit-transform: rotate(342deg);
transform: rotate(342deg);
}
body .clock-round .minutes span:nth-child(58).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(58).active-minute.active-second:after {
content: "57";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(59) {
-moz-transform: rotate(348deg);
-ms-transform: rotate(348deg);
-webkit-transform: rotate(348deg);
transform: rotate(348deg);
}
body .clock-round .minutes span:nth-child(59).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(59).active-minute.active-second:after {
content: "58";
margin-left: 20px;
}
body .clock-round .minutes span:nth-child(60) {
-moz-transform: rotate(354deg);
-ms-transform: rotate(354deg);
-webkit-transform: rotate(354deg);
transform: rotate(354deg);
}
body .clock-round .minutes span:nth-child(60).active-minute.active-second {
left: 400px !important;
}
body .clock-round .minutes span:nth-child(60).active-minute.active-second:after {
content: "59";
margin-left: 20px;
}
</style>
</head>
<body>
<div class='clock-round clock'>
<div class='hours'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
<div class='minutes'>
<span>00</span>
<span>01</span>
<span>02</span>
<span>03</span>
<span>04</span>
<span>05</span>
<span>06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span>32</span>
<span>33</span>
<span>34</span>
<span>35</span>
<span>36</span>
<span>37</span>
<span>38</span>
<span>39</span>
<span>40</span>
<span>41</span>
<span>42</span>
<span>43</span>
<span>44</span>
<span>45</span>
<span>46</span>
<span>47</span>
<span>48</span>
<span>49</span>
<span>50</span>
<span>51</span>
<span>52</span>
<span>53</span>
<span>54</span>
<span>55</span>
<span>56</span>
<span>57</span>
<span>58</span>
<span>59</span>
</div>
</div>
</body>
<script>
var t = setInterval(function() {
var date = new Date();
var hours = date.getHours() % 12 || 12;
var minutes = date.getMinutes();
var seconds = date.getSeconds();
//var minutes = 42;
//var seconds = 42;
document.querySelectorAll('.clock').forEach(function(clock) {
// 移除所有活跃类
clock.querySelectorAll('span').forEach(function(span) {
span.classList.remove('active', 'active-minute', 'active-second');
});
// 添加活跃类到小时
var hourSpans = clock.querySelectorAll('.hours span');
if (hourSpans[hours - 1]) {
hourSpans[hours - 1].classList.add('active');
}
// 添加活跃类到分钟
var minuteSpans = clock.querySelectorAll('.minutes span');
if (minuteSpans[minutes]) {
minuteSpans[minutes].classList.add('active-minute');
}
// 添加活跃类到秒
if (minuteSpans[seconds]) {
minuteSpans[seconds].classList.add('active-second');
}
});
}, 1000);
</script>
</html>
| 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
