You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
20 lines
1.3 KiB
20 lines
1.3 KiB
*{margin:0;padding: 0;} |
|
body{background: black;} |
|
li{list-style-type: none;} |
|
.wrap{width:960px;height:330px; margin:100px auto;} |
|
.wrap .clock{height: 220px;} |
|
.wrap .clock ul li{width: 120px;height: 220px;float: left;margin:0 10px;} |
|
.wrap .clock ul li ul{position: relative;} |
|
.wrap .clock ul li ul li{width:90px;height: 20px;display: block;} |
|
.wrap .clock ul li ul li:nth-child(1){position:absolute;left: 15px;} |
|
.wrap .clock ul li ul li:nth-child(2){position:absolute;transform:rotateZ(90deg);top:0px;left:-35px;top:50px;} |
|
.wrap .clock ul li ul li:nth-child(3){position:absolute;transform:rotateZ(90deg);top:0px;left:65px;top:50px;} |
|
.wrap .clock ul li ul li:nth-child(4){position:absolute;top: 100px;left: 15px;} |
|
.wrap .clock ul li ul li:nth-child(5){position:absolute;transform:rotateZ(90deg);top:150px;left:-35px;} |
|
.wrap .clock ul li ul li:nth-child(6){position:absolute;transform:rotateZ(90deg);left:65px;top: 150px;} |
|
.wrap .clock ul li ul li:nth-child(7){position:absolute;top: 200px;left: 15px;} |
|
.wrap .clock ul .point{width: 30px;} |
|
.wrap .clock ul .point span{display:block;height: 20px;width: 20px;background: #f10404;margin:60px 15px;} |
|
|
|
.wrap .date span:first-child{float: left;margin-left: 10px;} |
|
.wrap .date span:last-child{float: right;margin-right:30px;} |