ONE 星级评级系统——评级的未来

<one-star-rating> Web 组件

最近，很多人都在努力打造一个星级评定系统。现在，是时候带来那个改变世界的“星级评定”了！

我称之为：一星评级

既然一颗星就能搞定，何必用多颗星呢？一颗星就能容纳所有信息。让我们打破思维定式，构建评级体系的未来。

观看实际效果：

多亏了我的几何超能力，我把星星分成了5个部分，选中的部分数量将决定评分。这样，我们就有了一个只有一颗星的1到5的评分系统！

为什么这个系统会胜过所有其他系统？

紧凑：所有信息都存储在一个很小的空间里。相当于一颗星所需的空间。

太棒了：大家都对老式的星级评分感到厌倦了。这个评分系统一定会给你的访客留下深刻印象，让他们愿意给你打5分！

rtl或ltr??：别想了。我们不再有直线方向，而是圆形方向。时钟有方向吗？没有！这里也一样，它是一个通用的圆形方向。

我们不要忘记其他所有优点：

✔️ 无需 JavaScript。✔️
无需复杂的 HTML 代码。✔️
简洁的 CSS 代码。✔️
无需 SVG，无需图片。✔️
支持键盘导航。

它是如何工作的？

我保留了与之前实现相同的 HTML 代码，包括输入和一个额外的元素。

无需 JS 即可实现可扩展的“星级评定”（并且无需 SVG 或星级图像）

Temani Afif ・ 21年7月4日

#css #html #webdev #初学者

我首先将所有输入（和额外的元素）放置在一个方形元素内，彼此重叠。

• 正方形使用固定宽度和比例来定义（您也可以将高度设置为等于宽度）
• 感谢grid-area:1/1，我可以将所有元素放在一起，而无需使用position:absolute
• 我添加了width:100%;height:100%输入，使它们覆盖整个区域，并使它们不可见（但仍然具有交互性）

<i>然后，我使用元素 和创建星形clip-path。该形状将有 3 个背景层

1. 覆盖整个星星的底部（灰色）
2. 金色中间层将定义所选部分。为此，我将使用一个conic-gradient带有72deg步长（360deg/5）的 ，并通过变量 进行控制--p。
3. 最顶层与 (2) 类似，颜色为半透明，并由变量 控制--l。没错，这个会响应悬停效果。

现在真正的技巧是我们的输入的位置和形状。

每个都被剪辑到星星的顶部，如下所示：

在这一步，它们都将定义我们星星的同一部分。我们需要旋转它们，使每个部分都位于不同部分的顶部。

.stars input:nth-of-type(2) {transform:rotate(72deg)}
.stars input:nth-of-type(3) {transform:rotate(144deg)}
.stars input:nth-of-type(4) {transform:rotate(216deg)}
.stars input:nth-of-type(5) {transform:rotate(288deg)}

现在，每个输入都放置在星形某个部分的顶部并剪辑到该部分。

剩下的故事大家都知道了。:hover我:checked修改了之前描述的变量，就得到了一星评级。

就这样！只需一段简单的代码，我们就得到了一个创新的星级评分。您可以轻松调整大小、循环方向，并且它使用默认值即可正常工作：