仅CSS的星级等级组件等等！（第2部分）-css教程-PHP中文网

首页

web前端

css教程

仅CSS的星级等级组件等等！（第2部分）

Joseph Gordon-Levitt

Apr 22, 2025 am 10:23 AM

仅CSS的星级等级组件等等！（第2部分）

在上一篇文章中，我们构建了一个仅CSS的星级评级组件，利用CSS掩码， border-image和增强的attr()函数。由此产生的代码提供了创建变化的适应性，例如心脏评分和音量控制。

此后续活动探索了使用滚动驱动的动画的更通用的方法。我们将利用基于滚动的动画的力量，而不是border-image方法。

这是使用此新技术实现的同一星级评级组件。由于其实验性质，最佳观看需要Chrome 115（Safari和Firefox支持待处理）。

注意关键区别：星颜色动态反映选择数 - border-image方法不可能的壮举。

为了完全理解，强烈建议审查第一篇文章，因为本部分基于其概念和技术。

重要说明：在写作时，只有Chrome 115和Edge 115完全支持此处使用的功能。跟随时，请使用这些浏览器之一。

###为什么要滚动驱动动画？

将卷轴驱动的动画应用于静态星级评分组件似乎是违反直觉的。滚动驱动动画的MDN解释最初增加了混乱：

它使您可以根据基于滚动的时间表的进程而不是基于默认的基于时间的文档时间表来对属性值进行动画化。这意味着您可以通过滚动可滚动元素而不是通过时间来使元素动画。

但是，MDN阐明存在两种基于卷轴的时间表：滚动进度时间表并查看进度时间表。我们将利用后者：

您可以根据滚动器内部的元素（称为主题）的可见性变化来进行此时间表。滚动器内部对象的可见性是作为进度的百分比跟踪的 - 默认情况下，当受试者在滚动器的一个边缘上首先可见时，时间轴为0％，当它到达相反的边缘时100％。

CSS-Tricks年鉴提供了另一个有用的view-timeline-name定义。

通过将拇指元素视为主题，将输入元素视为滚动器，该概念变得更加清晰。输入区域内的拇指运动改变了其可见性，从而创造了一个基于百分比的进度，我们可以用来为输入设置样式。从本质上讲，我们正在复制document.querySelector("input").value ，但纯粹是用CSS！

实施详细信息

让我们检查代码：

 @property -Val {
  语法：”<number> ”
  继承：正确；
  初始值：0; 
}

输入[type =“ range”] {
   -  min：attr（min类型（最低）类型（<number> ）;
  -max：attr（max type（max type）（<number> ）;

  时间轴范围：-Val;
  动画： -  Val线性两者；
  动画台式：-Val;
  动画范围：条目100％退出0％；
  溢出：隐藏；
}

@KeyFrames -Val {
  0％{ -  Val：var（-max）}
  100％{ -  val：var（-min）}
}

输入[type =“ range”] :: thumb {
  视图 - 台式： -  val inline;
}</number></number></number>

这可能看起来很复杂，但是逐条分解简化了它。

主题和滚动器

我们使用view-timeline速记来定义主题（拇指）：

view-timeline CSS Shorthand属性定义了一个命名的视图进度时间表，该时间表根据可滚动元素（滚动器）中元素（主题）的可见性更改进行进展。 view-timeline是对该主题设置的。

时间轴名称为--val ，轴为inline （水平）。

接下来，我们用溢出来定义滚动器（输入） overflow: hidden （或overflow: auto ）。至关重要的是，不要忘记滚动器上的overflow ！没有它，浏览器将定义滚动器，有可能导致意外结果。

动画片

动画使用增强的attr()函数修改输入的min和max之间的--val变量。该动画使用animation-timeline 。 @property规则注册动画变量。

timeline-scope也是至关重要的。命名的视图时间表通常范围范围为元素及其后代。由于输入是拇指的父母，因此我们使用timeline-scope扩大了范围。

密钥帧值倒置（ min为100％， max为0％），因为动画始于拇指在右侧（最大值）并在左侧结束（最小值）。这反映了水平滚动元素的行为，该元素从右侧出现并消失向左。

动画范围

animation-range: entry 100% exit 0%;至关重要。默认情况下，动画从主题从右侧进入滚动器并从左侧退出时结束时开始。由于拇指不会溢出，我们调整了范围，因此当拇指完全在滚动器内并开始离开时结束时，动画开始了。

重复使用--val是指动画变量，命名的视图时间轴和键框，所有这些都共享相同的名称，以提高清晰度。使用不同的名称可以增强可读性。

星级评分组件

核心工作涉及获得输入的价值。其余代码样式组件，从第一篇文章中汲取：

输入[type =“ range”] {
  背景： 
    线性梯度（90级，
      HSL（calc（30 4 * var（-val））100％56％）calc（var（-val） * 100％ / var（-max）），
      ＃7B7B7B 0
    ）；
}
输入[type =“ range”] :: thumb {
  不透明度：0;
}

拇指是隐藏的，梯度基于--val变量为星星颜色。梯度的颜色还使用hsl()动态变化。

完整的演示（推荐Chrome 115）展示了该功能，包括通过调整输入的属性来显示半明星支持。