CSS3溫度刻度尺是一種很炫酷的效果，可以用于天氣預(yù)報(bào)等相關(guān)領(lǐng)域。下面就來介紹一下如何使用CSS3制作溫度刻度尺。

/*溫度刻度尺背景*/
.temperature{
height:150px;
width:500px;
background-image:linear-gradient(to top,white 0%,white 50%, rgb(254, 74, 73) 50%,rgb(254, 74, 73) 50%,rgb(255, 153, 0) 50%,rgb(255, 153, 0) 100%),
linear-gradient(to bottom, rgb(36, 178, 216) 0%,rgb(36, 178, 216) 50%,rgb(254, 74, 73) 50%,rgb(254, 74, 73) 50%,rgb(255, 153, 0) 50%,rgb(255, 153, 0) 100%);
background-size:10% 100%;
background-repeat:repeat-x;
position:relative;
margin:auto;
}
/*溫度刻度*/
.temperature .scale{
width:100%;
height:80%;
position:relative;
}
.temperature .scale li{
position:absolute;
bottom:0;
width:2px;
height:10%;
background:black;
transform-origin:bottom center;
list-style:none;
}
.temperature .scale li:nth-child(5n){
height:20%;
}
.temperature .scale li:last-child{
background: #f50;
height: 30%;
}
/*溫度數(shù)字*/
.temperature .num{
position:absolute;
top:-25px;
left:20px;
font-size:25px;
}

在上述代碼中，我們定義了一個(gè).temperature類作為溫度刻度尺的容器，然后我們通過使用CSS漸變屬性制作了一個(gè)溫度刻度尺的背景，包括漸變部分和重復(fù)部分。緊接著，我們定義了一個(gè).scale類作為刻度的容器，并設(shè)置了每個(gè)刻度的樣式。同時(shí)，我們還定義了一個(gè).num類，用于顯示當(dāng)前溫度值的數(shù)字，這里的數(shù)字可以根據(jù)實(shí)際需求來定義。

使用這些CSS代碼制作出的溫度刻度尺不僅外觀酷炫，而且功能強(qiáng)大，可以滿足我們?cè)陂_發(fā)天氣預(yù)報(bào)等相關(guān)領(lǐng)域的需求。