使用css3製作時鐘動畫
阿新 • • 發佈：2018-11-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="sad"> <div class="ke" id="ke1"></div> <div class="ke" id="ke2"></div> <div class="ke" id="ke3"></div> <div class="ke" id="ke4"></div> <div class="ke" id="ke5"></div> <div class="ke" id="ke6"></div> <div id="biaopan"> <div id="h"></div> <div id="i"></div> <div id="s"></div> </div> </div> </div> <style> * { padding: 0; margin: 0; } .sad { margin: 50px auto; width: 300px; height: 300px; border-radius: 50%; border: 10px solid #888888; position: relative; } .ke { background-color: #888888; width: 8px; height: 300px; position: absolute; left: 50%; transform: translate(-50%, 0); } #ke1, #ke4 { width: 10px; } #ke2 { transform: translate(-50%, 0) rotate(30deg); /*必須把之前的translate(-50%, 0)加上重新賦值transform屬性會把之前的重新整理掉 導致旋轉中心偏移*/ } #ke3 { transform: translate(-50%, 0) rotate(60deg); } #ke4 { transform: translate(-50%, 0) rotate(90deg); } #ke5 { transform: translate(-50%, 0) rotate(120deg); } #ke6 { transform: translate(-50%, 0) rotate(150deg); } #biaopan { position: absolute; width: 250px; height: 250px; border-radius: 50%; transform: translate(-50%, -50%); left: 50%; top: 50%; background-color: #fff; } #h { position: absolute; width: 6px; height: 80px; background-color: red; left: 50%; top: 50%; transform: translate(-50%, -100%); animation-name: clockAnimate; animation-duration: 43200s; transition-timing-function: linear; animation-iteration-count: infinite; } #i { position: absolute; width: 4px; height: 100px; background-color: green; left: 50%; top: 50%; transform: translate(-50%, -100%); animation-name: clockAnimate; animation-duration: 3600s; transform-origin: 50% 100%; animation-iteration-count: infinite; } #s { position: absolute; width: 2px; height: 120px; background-color: hotpink; left: 50%; top: 50%; transform: translate(-50%, -100%); animation-name: clockAnimate; animation-duration: 60s; transform-origin: 50% 100%; /*transition-timing-function: steps(60); 谷歌不支援這麼寫*/ animation-iteration-count: infinite; /*-webkit-animation-timing-function:steps(60);//指標跳格效果*/ animation-timing-function: steps(60); } #biaopan:before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #000; z-index: 200; } @keyframes clockAnimate { from { transform: translate(-50%, -100%) rotate(0deg); } to { transform: translate(-50%, -100%) rotate(360deg); } } </style> </body> </html>
