CSS3純時鐘是一種非常炫酷的網頁特效，它能夠在網頁中顯示一個實時的時鐘，讓用戶可以方便地獲取當前時間。

/* CSS3純時鐘樣式 */
.clock {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.hand {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
background-color: #333;
transform: translate(-50%, -50%);
transform-origin: center bottom;
}
.hour {
height: 50px;
}
.minute {
height: 70px;
}
.second {
height: 90px;
}

以上是CSS3純時鐘的樣式代碼，我們可以看到樣式主要由.clock和.hand兩個類組成。其中，.clock類定義了時鐘的基本樣式，包括寬度、高度、圓角和陰影等。.hand類定義了時針、分針和秒針的樣式，其中，transform屬性和transform-origin屬性用于設置變形和變形的原點。

以下是JS代碼，用于獲取當前時間并更新時針、分針和秒針的位置。

/* JS更新時間 */
setInterval(function() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var hourDeg = hour * 30 + minute / 2;
var minuteDeg = minute * 6;
var secondDeg = second * 6;
document.querySelector('.hour').style.transform = 'rotate(' + hourDeg + 'deg)';
document.querySelector('.minute').style.transform = 'rotate(' + minuteDeg + 'deg)';
document.querySelector('.second').style.transform = 'rotate(' + secondDeg + 'deg)';
}, 1000);

在JS代碼中，我們使用setInterval方法每隔1秒鐘更新一次時鐘的位置。通過Date()對象獲取當前時間，然后計算出時針、分針和秒針的旋轉角度，最后使用查詢選擇器和style.transform屬性來改變每個針的位置。

通過結合CSS3和JS，我們可以輕松地在網頁中創建一個炫酷的純時鐘效果。這不僅可以讓網頁變得更加實用，還可以增加用戶的體驗感。