羅馬時(shí)鐘是一種古老的時(shí)間測(cè)量方式。在現(xiàn)代的網(wǎng)頁(yè)設(shè)計(jì)中，我們可以使用CSS來(lái)模仿這種時(shí)鐘的風(fēng)格。下面將分享如何使用CSS實(shí)現(xiàn)羅馬時(shí)鐘。

/* 首先，我們需要定義羅馬數(shù)字的樣式 */
.roman-numeral {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
font-size: 150%;
}
/* 接下來(lái)，定義鐘表的主樣式 */
.clock {
width: 200px; /* 鎖表的大小 */
height: 200px;
border: 3px solid #000;
border-radius: 50%;
position: relative;
}
/* 定義鐘表的刻度 */
/* 每個(gè)刻度都是一個(gè)div元素，用偽類:after來(lái)填充羅馬數(shù)字 */
.clock .mark {
position: absolute;
border: 2px solid #000;
width: 6px;
height: 20px;
left: 50%;
top: 10px;
margin-left: -3px;
}
.clock .mark:after {
content: "I";
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
font-size: 18px;
}
/* 定義鐘表的時(shí)針 */
.clock .hour-hand {
position: absolute;
width: 8px;
height: 60px;
background-color: #000;
left: calc(50% - 4px);
top: calc(50% - 50px);
transform-origin: bottom center;
transform: rotate(30deg);
}
/* 定義鐘表的分針 */
.clock .minute-hand {
position: absolute;
width: 6px;
height: 80px;
background-color: #000;
left: calc(50% - 3px);
top: calc(50% - 80px);
transform-origin: bottom center;
transform: rotate(15deg);
}
/* 定義鐘表的秒針 */
.clock .second-hand {
position: absolute;
width: 2px;
height: 90px;
background-color: #f00;
left: calc(50% - 1px);
top: calc(50% - 90px);
transform-origin: bottom center;
transform: rotate(45deg);
}
/* 最后，讓針頭動(dòng)起來(lái) */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.clock .hour-hand {
animation: rotate 12s linear infinite;
}
.clock .minute-hand {
animation: rotate 1min linear infinite;
}
.clock .second-hand {
animation: rotate 1s linear infinite;
}