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中文网其他相关文章！
