<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } /* 畫一個圓,做表盤 */ .clock { width: 400px; height: 400px; border: 1px solid #FFC0CB; border-radius: 50%; /* 居中 */ margin: 50px auto; position: relative; background-color: #FCF9F9; box-shadow: 0 0 5px 2px; } /* 設置絕對定位,方便接下來的操作 */ .clock>div { position: absolute; } /* 刻度線 */ .line { width: 2px; height: 100%; background-color: #ccc; margin-left: -1px; left: 50%; } .line:first-child{/* 不用設置,默認狀態 */ } .line:nth-child(2){ transform: rotate(30deg); } .line:nth-child(3){ transform: rotate(60deg); } .line:nth-child(4){ transform: rotate(90deg); } .line:nth-child(5){ transform: rotate(120deg); } .line:nth-child(6){ transform: rotate(150deg); } /* 在表盤上再覆蓋一個圓,使刻度線為10px */ .cover { width: 380px; height: 380px; background-color: #fcf9f9; border-radius: 50%; left: 50%; top: 50%; /* 進行定位 */ margin-top: -190px; margin-left: -190px; } /* 時針 */ .h { width: 6px; height: 90px; background-color: #999; margin-left: -3px; left: 50%; top: 100px; /* 改變旋轉基點為bottom，使其繞着底部旋轉 */ transform-origin:bottom; /* 添加動畫,steps(60)是animation-timing-function動畫速度曲線的一種,意為分為60個階段 */ animation: rotate 43200s steps(60) infinite; } /* 分針 */ .m { width: 4px; height: 130px; background-color: #90EE90; margin-left: -2px; left: 50%; top: 60px; transform-origin:bottom; animation: rotate 3600s steps(60) infinite; } /* 秒針 */ .s { width: 2px; height: 160px; background-color: pink; margin-left: -1px; left: 50%; top: 30px; transform-origin:bottom; animation: rotate 60s steps(60) infinite; } /* 中間點 */ .dotted { width: 20px; height: 20px; border-radius: 50%; background-color: #CCCCCC; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; } /* 動畫的關鍵幀 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="clock"> <!-- 表面 --> <!-- 刻度線 --> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="cover"></div> <div class="h"></div> <!-- 時針 --> <div class="m"></div> <!-- 分針 --> <div class="s"></div> <!-- 秒針 --> <div class="dotted"></div> <!-- 中間點 --> </div> </body> </html>
效果如下：
