HTML5提供了許多新的元素和功能，其中之一就是<canvas>元素，它可以用來繪制圖形和動畫。利用<canvas>元素，我們可以輕松地制作一個時鐘，而不需要使用JavaScript。
下面是一個簡單的HTML5時鐘代碼，只需使用HTML和CSS就能完成。
<!DOCTYPE html>
<html>
<head>
<title>HTML5時鐘</title>
<style>
#clock {
width: 200px;
height: 200px;
border: 10px solid #999;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
#clock .hour,
#clock .minute,
#clock .second {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center bottom;
transform: rotate(0deg);
}
#clock .hour {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 60px solid #666;
}
#clock .minute {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 80px solid #333;
}
#clock .second {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
</html>該代碼中，我們定義了一個#clockdiv，設置了它的樣式，包括寬度，高度，邊框，圓角等。然后，我們創(chuàng)建了三個子div，它們分別表示時針，分針和秒針，并設置了它們的樣式，包括顏色，大小，旋轉(zhuǎn)等。
接下來，我們需要使用CSS動畫來實現(xiàn)指針的動態(tài)效果。通過使用@keyframes和animation屬性，我們可以定義指針的旋轉(zhuǎn)動畫，并將它們應用到相應的div上。
總之，利用HTML5和CSS3，我們可以輕松地制作一個簡單的時鐘。當然，這只是一個初級的例子，如果想要實現(xiàn)更復雜的時鐘，還需要使用JavaScript。
下一篇html5框架怎么設置