1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <div class="stopwatch"> <div class="stopwatch-top"></div> </div> <style type="text/css"> .stopwatch { width: 30px; height: 30px; background-color: transparent; border-radius: 50% 50%; border: 2px solid #fff; position: relative; } .stopwatch::before, .stopwatch::after { content: ''; position: absolute; top: 14px; left: 15px; height: 2px; background-color: #fff; transform-origin: 1px 1px; // 分针以及时针的旋转中心点 } /* 分针 */ .stopwatch::before { width: 15px; animation: fen 1s linear infinite; // 1s内完成动画,匀速,无限动画 } /* 时针 */ .stopwatch::after { width: 9px; animation: hour 60s linear infinite; // 同理 } @keyframes fen { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes hour { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 秒表顶部柱头,也可以不画 */ .stopwatch-top { position: absolute; width: 2px; height: 6px; left: 14px; top: -6px; background-color: #fff; } </style>
|