CSS3時鐘動畫效果是一種非常有趣的動畫效果,在很多網站中都有應用。使用CSS3時鐘動畫效果能夠讓你的網站更加生動、有趣、吸引人。
.clock { width: 300px; height: 300px; border-radius: 50%; background-color: #fff; position: relative; margin: 0 auto; animation: rotate 60s infinite linear; } .hour, .minute, .second { position: absolute; top: 50%; left: 50%; transform-origin: bottom center; transform: translate(-50%, -100%); background-color: #000; } .hour { width: 8px; height: 60px; border-radius: 10px 10px 0 0; } .minute { width: 6px; height: 80px; border-radius: 10px 10px 0 0; } .second { width: 4px; height: 100px; border-radius: 10px 10px 0 0; } @keyframes rotate { 100% { transform: rotate(360deg); } }
上述代碼中,我們首先定義了一個大小為300x300的圓形時鐘容器,并為其設置了邊框圓角和背景色。然后,我們分別定義了時、分、秒三個指針,并為它們設置了不同的樣式。最后,我們使用@keyframes定義一個名為rotate的動畫,使整個時鐘容器可以無限旋轉。
上一篇CSS3旋轉蛋糕教程視頻
下一篇mysql查詢唯一索引