色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

純css 評分

錢斌斌2年前8瀏覽0評論

純 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 評分效果。