罗马时钟代码html,css3+js实现罗马数字指针时钟（原创）

* {

margin:0;

padding:0;

}

li {

list-style:none;

}

.box {

width:300px;

height:300px;

border:1px solid #000;

border-radius:50%;

position:relative;

margin-left:50px;

margin-top:20px;

}

.box div {

position:absolute;

opacity:0.5;

}

.ul li {

position:absolute;

left:149px;

top:0;

transform-origin:center 150px;

}

.ul li span {

width:2px;

height:4px;

background:#000;

display:block;

}

.ul li:nth-of-type(5n) span {

width:2px;

height:10px;

background:red;

}

.ul li span i {

display:inline-block;

margin:10px 0 0 -10px;

}

.ul li:nth-of-type(5) span i {

transform-origin:8px 7px;

transform:rotate(-50deg);

}

.ul li:nth-of-type(10) span i {

transform-origin:8px 7px;

transform:rotate(-70deg);

}

.ul li:nth-of-type(15) span i {

transform-origin:8px 7px;

transform:rotate(-100deg);

}

.ul li:nth-of-type(20) span i {

transform-origin:8px 7px;

transform:rotate(-120deg);

}

.ul li:nth-of-type(25) span i {

transform-origin:9px 9px;

transform:rotate(-170deg);

}

.ul li:nth-of-type(30) span i {

transform-origin:9px 10px;

transform:rotate(-190deg);

}

.ul li:nth-of-type(35) span i {

transform-origin:9px 10px;

transform:rotate(-220deg);

}

.ul li:nth-of-type(40) span i {

transform-origin:9px 10px;

transform:rotate(100deg);

}

.ul li:nth-of-type(45) span i {

transform-origin:9px 10px;

transform:rotate(80deg);

}

.ul li:nth-of-type(50) span i {

transform-origin:9px 10px;

transform:rotate(50deg);

}

.ul li:nth-of-type(55) span i {

transform-origin:9px 10px;

transform:rotate(15deg);

}

.s {

width:6px;

height:30px;

left:147px;

top:120px;

transform-origin:3px bottom;

}

.f {

width:4px;

height:60px;

left:148px;

top:90px;

transform-origin:2px bottom;

}

.m {

width:2px;

height:150px;

left:149px;

top:0;

transform-style:preserve-3d;

transform-origin:1px bottom;

}

.box .yd {

width:6px;

height:6px;

border:2px solid #000;

background:#fff;

border-radius:50%;

left:145px;

top:146px;

opacity:1;

}