<!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>
效果如下：
