溫度計是一種非常常見的測量氣溫的儀器,在CSS中我們也可以通過類似溫度計的方式來表示溫度的某個值。
.temperature{ position: relative; width: 50px; height: 200px; border-radius: 25px; background: #ccc; } .temperature:before { content: ""; position: absolute; bottom: 10px; left: -20px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #ccc; } .temperature:after { content: attr(data-temperature) "°C"; position: absolute; bottom: -30px; left: -30px; width: 60px; text-align: center; font-size: 14px; font-weight: bold; } .temperature .mercury { position: absolute; bottom: 10px; left: 5px; width: 40px; height: 0; border-top: 120px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; }
以上是表示溫度的CSS代碼,通過這段代碼我們可以實現一個紅色的水銀柱溫度計,根據不同的數據來表示不同的溫度值。其中我們使用了偽元素和data屬性來實現溫度值的顯示和溫度計的樣式。
使用CSS來表示溫度是一種非常實用的技能,可以幫助我們在網頁設計中更加準確地表達需要展示的信息。掌握這種技能需要不斷的實踐和積累經驗,相信只要不懈努力,一定能夠實現自己的想法。
上一篇漸漸顯示css