在網頁設計中，往往需要展示一些數據和信息。其中，溫度儀表盤常常被用來展示溫度數據。CSS溫度儀表盤是一種優雅、簡單的溫度儀表盤設計，而且它也相對容易實現。

以下是一個基于CSS的溫度儀表盤的例子：

gauge是包圍整個儀表盤的大容器，background是后面的灰色長條，needle則是紅色的指針。

增加CSS樣式：

.gauge {
position: relative;
width: 200px;
height: 100px;
margin: 0 auto;
}
.background {
position: absolute;
top: 20px;
left: 0;
right: 0;
bottom: 20px;
background-color: #eee;
border-radius: 10px;
}
.needle {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
width: 10px;
background-color: red;
transform: rotate(45deg);
transform-origin: 100% 50%;
}

我們為儀表盤和指針都指定了位置，同時也設置了大小。

儀表盤這里有一個圓角邊框，并且在垂直方向上中心部分有一個稍稍突起的區域，不過這些都不是必需的。

指針是用一個紅色div取代了傳統的指針。同時，我們使用CSS中的rotate函數來旋轉指針，這里設定的旋轉角度是45度（即打到中間的位置）。

最后，為了顯示出真實的溫度數據，我們需要通過JavaScript來動態改變指針的角度。代碼如下：

var gauge = document.querySelector('.gauge');
var needle = document.querySelector('.needle');
function updateNeedle(temperature) {
var percent = (temperature - 20) / 10;
var degrees = 180 * percent;
needle.style.transform = 'rotate(' + degrees + 'deg)';
}
updateNeedle(25); // update needle with current temperature

我們使用了document.querySelector來選中gauge和needle元素，然后定義一個updateNeedle函數，實現溫度數據到角度的轉換，并且通過改變needle的transform樣式來移動指針。

最后，我們調用updateNeedle函數來更新指針，這里的參數是溫度。以上代碼適用于展示溫度范圍在20到30度的情況，若需改變其它范圍或是進一步優化，可以依據實際情況進行調整。