CSS3 实现文本与图片横向无限滚动动画

/* 设置容器样式 */
.scroll-container {
  white-space: nowrap;
  overflow: hidden;
  background: #f0f0f0;
}
 
/* 设置滚动的内容样式 */
.scroll-content {
  display: inline-block;
  animation: scroll-left 10s linear infinite;
}
 
/* 定义关键帧动画 */
@keyframes scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
/* HTML结构 */
<div class="scroll-container">
  <div class="scroll-content">
    <!-- 这里插入图片和文本内容 -->
    <img src="path/to/image.jpg" alt="滚动的图片" />
    <span>这里是滚动的文本内容</span>
    <!-- 重复.scroll-content内容以实现无限滚动 -->
    <img src="path/to/image.jpg" alt="滚动的图片" />
    <span>这里是滚动的文本内容</span>
  </div>
</div>

这个例子展示了如何使用CSS3的关键帧动画来实现文本和图片的横向滚动动画效果。.scroll-container 容器确保内容在水平方向上不会换行，而.scroll-content 使用animation属性应用了一个名为scroll-left的动画，该动画会使内容从右向左滚动，形成一种连续滚动的效果。