如何使用 CSS3 动画创建响应式跑马灯效果？

如何使用 CSS3 动画创建响应式选取框效果？

CSS3 动画提供了一种向网站元素添加动感的强大方法。最常见的应用之一是字幕效果，其中文本在屏幕上滚动。然而，创建适应任意长度文本的选取框效果可能具有挑战性。

之前的尝试

创建选取框效果的传统方法通常依赖于固定值，例如 margin-left:-4200px； 。虽然这适用于特定的文本大小，但当文本长度变化时，就会出现问题。

调整方法

利用稍微修改过的标记，并在段落中嵌套跨度，可以让响应式解决方案。这是更新的方法：

.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;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

在此方法中，跨度的宽度设置为“最大内容”，确保其调整为文本的长度。 padding-left 用于将文本移出可见区域，动画将文本翻译回视图中，从而创建选取框效果。

尊重用户首选项

出于可访问性问题，代码尊重用户关于运动的偏好。如果用户喜欢减少运动，则禁用动画。

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

通过结合这些技术，您可以创建适应任意数量文本的响应式选取框效果，从而增强设计灵活性和可访问性。

以上是如何使用 CSS3 动画创建响应式跑马灯效果？的详细内容。更多信息请关注PHP中文网其他相关文章！