CSS圖片時鐘

.clock {
width: 200px;
height: 200px;
background-image: url(clock.png);
background-size: cover;
position: relative;
}
.hour-hand {
width: 6px;
height: 60px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom center;
}
.minute-hand {
width: 4px;
height: 80px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom center;
}
.second-hand {
width: 2px;
height: 100px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom center;
animation: spin 60s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

這是一個使用CSS創建的圖片時鐘。通過使用background-image將圖片作為時鐘的背景，用絕對定位的指針來表示小時、分鐘和秒鐘。

首先，我們創建一個類叫做.clock，它定義了時鐘的寬度、高度和背景圖像，它還用position:relative來確定絕對定位的子元素。

接下來就是重頭戲了——時鐘的指針。我們用類.hour-hand、.minute-hand和.second-hand來表示它們。每個指針都有一個width、height、background-color和position:absolute屬性，用來確定指針的大小、顏色和位置。請注意，它們的初始位置是在時鐘的中心，因此我們使用translate(-50 %，-100 %)將它們移到中心。

但是，我們還需要將指針從它們的末端旋轉。這是由transform-origin和transform屬性實現的。transform-origin用來確定指針的旋轉點，transform用來執行旋轉動畫。因為小時和分鐘不需要動畫，所以它們只需要第一個屬性，而秒鐘需要旋轉動畫，因此我們使用了animation屬性。

最后，我們定義了@keyframes spin，它定義了指針旋轉的動畫。在這個例子中，我們使用了線性動畫，并將指針旋轉360度，使它們繞著鐘表面轉動。

這就是CSS圖片時鐘的全部內容。查看在線演示，點擊這里。