</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>

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

• hour-hand（時(shí)針）
• minute-hand（分針）
• second-hand（秒針）

這些針的平移和旋轉(zhuǎn)將 CSS3 的 transform 屬性與相應(yīng)的屬性值配合使用，從而更好地實(shí)現(xiàn)動(dòng)態(tài)效果。例如，transform-origin 屬性設(shè)置了平移的基點(diǎn)，top 和 left 屬性指定了每個(gè)針的偏移量。

以上就是使用 Vue 和 CSS3 創(chuàng)建簡單時(shí)鐘的方法。此時(shí)鐘可以用作 Web 應(yīng)用程序的計(jì)時(shí)器或其他有用的時(shí)間度量工具。