然後是：
代碼如下：
<!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中文網。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
