純 CSS 評分是通過使用樣式表語言 CSS 來實現的一種評分效果。它不需要借助腳本或其他輔助工具,只需要定義一組樣式,即可在頁面中展示出評分效果。
.star { display: inline-block; width: 1em; height: 1em; margin: 0 0.25em; background-color: #ccc; border-radius: 50%; position: relative; } .star:before { content: ''; display: block; width: 0; height: 0; border-top: 0.5em solid #ffca08; border-right: 0.3em solid transparent; border-left: 0.3em solid transparent; position: absolute; top: 0rem; left: 0rem; transform: translateX(0.5em) translateY(0.5em) rotateZ(-35deg); } .star:hover:before, .star:hover ~ .star:before { border-top-color: #f8b620; } .star.active:before, .star.active ~ .star:before { border-top-color: #ffca08; } .star.active:hover:before, .star.active:hover ~ .star:before { border-top-color: #f8b620; }
上述代碼定義了一個名為 .star 的樣式類,用于表示評分星星的樣式。每個星星都是一個圓點加一個黃色的三角形,鼠標懸停時三角形變為黃橙色,選中時星星變為黃色,鼠標懸停時選中星星變為黃橙色。
通過使用該樣式類,可以在 HTML 中創建一個評分控件:
上述代碼定義了一個名為 .rating 的容器,容器中包含五個使用樣式類 .star 的元素。其中前三個元素使用 .active 類表示為選中狀態,后兩個元素為未選中狀態。
通過以上方式,即可在頁面中實現動態的純 CSS 評分效果。
下一篇mysql主從分區