CSS星星評分是在網站或應用程序上看到的一項常見功能。在本文中,我們將介紹如何使用CSS創建一個星星評分的基本示例。
/* HTML Code */ <div class="star-rating"> <input type="radio" name="rating" value="1"> <input type="radio" name="rating" value="2"> <input type="radio" name="rating" value="3"> <input type="radio" name="rating" value="4"> <input type="radio" name="rating" value="5"> </div> /* CSS Code */ .star-rating { display: inline-block; font-size: 0; } .star-rating input[type="radio"] { display:none; } .star-rating label { display: inline-block; width: 20px; height: 20px; margin: 0; padding: 0; background: url("star.png") no-repeat; cursor: pointer; } .star-rating input[type="radio"]:checked + label { background-position-y: -20px; }
在上面的示例中,我們首先創建了一個包含5個評分單選按鈕的div,每個單選按鈕有不同的值。我們使用CSS樣式表設置評分星級的顯示方式,包括將評分星級的字體大小設置為零,并將單選按鈕的顯示設置為不可見。我們還使用背景圖像將星星圖案應用于單選按鈕的標簽。
還要注意的是,我們使用" + "選擇器將選定的單選按鈕和標簽設置為不同的背景位置。這些選擇器會將選定的星星移動到上部,以表示用戶給出的評分。
這個示例只是一個基本的星星評分示例,你可以通過使用不同的圖標或添加動畫效果等方式來定制化它。希望這篇文章對了解如何使用CSS創建星星評分有所幫助。
上一篇css星星樣式
下一篇css是什么有什么作用