CSS3環形時鐘是一個非常炫酷的設計,可以讓網站更加美觀。這種時鐘使用CSS3技術來創建,因為它可以實現全新的動畫效果和樣式。
.clock { position: relative; width: 250px; height: 250px; border-radius: 50%; border: 10px solid #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); background-color: #000; } .clock:before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); } .clock .hour { position: absolute; top: 50%; left: 50%; width: 8px; height: 60px; background-color: #fff; border-radius: 10px; transform-origin: bottom center; transition: transform .5s ease; } .clock .minute { position: absolute; top: 50%; left: 50%; width: 6px; height: 80px; background-color: #fff; border-radius: 10px; transform-origin: bottom center; transition: transform .5s ease; } .clock .second { position: absolute; top: 50%; left: 50%; width: 4px; height: 100px; background-color: red; border-radius: 10px; transform-origin: bottom center; transition: transform .5s ease; }
這些代碼使用了CSS3的動畫效果,其中“小時手”、“分鐘手”和“秒針”都被定義為絕對定位,并在CSS中設置它們的高度、寬度、顏色和圓角等屬性。這些元素的位置是通過transform-origin屬性來設置的。
雖然這只是一個演示示例,但如果你熟練掌握CSS3技術,你可以根據自己的需要來定制這個時鐘的樣式和動畫效果。