</div></template><style>.clock { width: 200px; height: 200px; position: relative; border-radius: 50%; border: 10px solid #333; } .hour-hand, .minute-hand, .second-hand { position: absolute; background-color: #333; } .hour-hand { width: 6px; height: 50px; top: 45px; left: 97px; transform-origin: bottom center; } .minute-hand { width: 4px; height: 70px; top: 35px; left: 98px; transform-origin: bottom center; } .second-hand { width: 2px; height: 90px; top: 25px; left: 99px; transform-origin: bottom center; } </style>

以上代碼創建了一個圓形的時鐘，外圍有邊框的線條，同時在圓心上方的位置設有表盤。時鐘的時間由三個針來表示：

• hour-hand（時針）
• minute-hand（分針）
• second-hand（秒針）

這些針的平移和旋轉將 CSS3 的 transform 屬性與相應的屬性值配合使用，從而更好地實現動態效果。例如，transform-origin 屬性設置了平移的基點，top 和 left 屬性指定了每個針的偏移量。

以上就是使用 Vue 和 CSS3 創建簡單時鐘的方法。此時鐘可以用作 Web 應用程序的計時器或其他有用的時間度量工具。