如何在没有硬编码值的情况下创建响应式 CSS3 选取框效果？

CSS3 中的选取框效果：避免文本适应的特定值

在 CSS3 动画中，通常需要创建选取框效果，其中文本滚动穿过屏幕。但是，使用特定值，例如“margin-left: -4200px;”文本缩进可能会限制不同的文本长度。

避免此问题的一种方法是将文本包装在 span 元素中并使用“padding-left”属性：

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%; /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

这允许动画适应文本的宽度，确保它在屏幕上完全滚动。此外，当用户将鼠标悬停在文本上时，“悬停”状态可用于暂停动画：

.marquee span:hover {
  animation-play-state: paused;
}

最后，为了尊重用户偏好，此代码实现了“prefers-reduced-motion”媒体查询，这会降低动画速度或为可能喜欢较少移动的用户完全禁用它。

以上是如何在没有硬编码值的情况下创建响应式 CSS3 选取框效果？的详细内容。更多信息请关注PHP中文网其他相关文章！