先提供大家兩張鐘錶和指標的圖:(具體大小需要自己下去調)
然後是效果圖:
#然後是效果圖:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摆动的钟表</title> <style type="text/css"> body{ margin: 0; background: #111; text-align: center; } h1{ font-size: 14px; font-family: "Microsoft YaHei UI"; text-align: center; } .stage{ width: 120px; height:auto; margin: 0 auto; position: relative; -webkit-transform-origin: center top; -webkit-transform: rotate(-30deg); -webkit-animation: sway 2.2s infinite alternate ease-in-out;/*alternate:反向*/ } .watch{ width: 100%; height: auto; } .seconds{ position: absolute; width: 8%; height:auto; bottom:11%; left:45.5%; -webkit-transform-origin: center 68%; -webkit-animation: second 60s infinite linear;/*infinite:无限循环*/ } @-webkit-keyframes second { to{ -webkit-transform: rotate(355deg); } } @-webkit-keyframes sway { to{ -webkit-transform: rotate(30deg); } } </style> </head> <body> <p class="stage"> <p class="watch"><img src="../img/clock.png" alt="" width="120" height="410"></p> <p class="seconds"><img src="../img/secondHand.png" alt="" width="10" height="55"></p> </p> </body> </html>
以上是css3+html5-擺動的鐘錶的詳細內容。更多資訊請關注PHP中文網其他相關文章!