CSS3是一種可以用來制作各種華麗效果的前端技術,其中制作鐘表也是一項不錯的使用方式。使用CSS3可以制作出漂亮的數字時鐘、秒表、倒計時器等,本文主要介紹如何使用CSS3制作一個簡單的鐘表。
.clock { width: 200px; height: 200px; margin: 20px auto; position: relative; border-radius: 50%; background-color: #fff; } .hour, .minute, .second { width: 0; height: 0; position: absolute; left: 50%; top: 50%; transform-origin: bottom center; background-color: #000; } .hour { width: 6px; height: 60px; margin-top: -60px; margin-left: -3px; border-radius: 6px 6px 0 0; transform: rotate(30deg); } .minute { width: 4px; height: 80px; margin-top: -80px; margin-left: -2px; border-radius: 4px 4px 0 0; transform: rotate(120deg); } .second { width: 2px; height: 100px; margin-top: -100px; margin-left: -1px; border-radius: 2px 2px 0 0; transform: rotate(150deg); animation: rotate 60s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上述代碼中,我們首先定義了一個容器,使用CSS3的border-radius屬性制作了圓形的表盤。然后分別定義了鐘表的時針、分針、秒針,使用絕對定位和transform屬性進行定位和旋轉。其中,時針的長度為60px,分針的長度為80px,秒針的長度為100px,作為鐘表的時間標志。
最后定義了一個動畫,使秒針一根不停地繞著鐘表轉,達到了實時顯示時間的效果。這就是CSS3制作鐘表的基本代碼,我們可以根據需要進行調整和優化。
上一篇mysql連接php
下一篇mysql連接 php