如何创建处理可变文本长度的响应式选取框效果？

<p>

选取框效果：解决长度可变性难题

<p>在这个场景中，我们努力创建具有动态文本长度的选取框效果。传统上，这是使用 CSS 属性的特定值（例如“margin-left”）来实现的。然而，这种方法在处理不同长度的文本时存在不足。

<p>幸运的是，有一个解决方案可以将我们的选取框从这些限制中解放出来。通过对 HTML 进行轻微调整并在段落中添加 span 元素，我们解锁了更具适应性的解决方案：

<p>

<p>接下来，我们为“marquee”和“span”类定义 CSS 规则。 “marquee”类定义段落的宽度和样式，而“span”类处理文本动画：

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

<p>对“width”和“padding-left”的调整允许选取框容纳不同长度的文本，确保其平滑滚动而不会截断任何内容。

<p>但是，我们需要解决最后一个细微差别：可访问性和用户偏好。对于喜欢减少运动的用户，我们应用媒体查询规则来调整动画行为。这可确保选取框尊重用户的偏好：

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01;
    width: auto;
    padding-left: 0;
  }
}

<p>通过实施这些更改，我们实现了选取框效果，可以优雅地适应文本长度，同时也尊重用户偏好。

以上是如何创建处理可变文本长度的响应式选取框效果？的详细内容。更多信息请关注PHP中文网其他相关文章！