倒計時是網頁開發中常見的功能之一,使用CSS實現倒計時旋轉效果可以為網頁增添一些動態感,增強用戶體驗。
下面是一段使用CSS實現的旋轉倒計時代碼:
<div class="countdown"> <div class="clock"></div> <div class="seconds-hand"></div> <div class="minutes-hand"></div> <div class="hours-hand"></div> <div class="days-hand"></div> </div> <style> .countdown { position: relative; width: 200px; height: 200px; } .clock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #ccc; box-sizing: border-box; } .seconds-hand, .minutes-hand, .hours-hand, .days-hand { position: absolute; top: 50%; left: 50%; transform-origin: left center; width: 5px; height: 50%; background-color: #333; animation: rotateHand 60s linear infinite; } .seconds-hand { height: 70%; background-color: #f00; animation: rotateHand 1s linear infinite; } .minutes-hand { animation: rotateHand 3600s linear infinite; } .hours-hand { animation: rotateHand 43200s linear infinite; } .days-hand { animation: rotateHand 1036800s linear infinite; } @keyframes rotateHand { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } </style>
以上代碼中使用了四個div和一段CSS代碼,其中.clock是倒計時圓圈,.seconds-hand、.minutes-hand、.hours-hand、.days-hand分別是秒針、分針、時針、天針。這里使用了CSS動畫來讓它們旋轉。
秒針使用1秒的時間完成一圈,分針、時針、天針則使用60秒、12小時、30天的時間完成一圈。這樣可以讓倒計時更精確,不會因為旋轉速度的問題導致時間顯示不準確。
至于如何將倒計時時間傳入代碼中,可以使用JavaScript動態生成頁面,或者通過后端代碼渲染模板來實現。