在css中如何用animation制作滚动元素动画

发布时间：2025-10-06

点击量：

通过CSS animation实现无缝滚动，首先设置容器隐藏溢出，内部元素横向排列；利用@keyframes定义translateX位移动画，使内容从右向左匀速滚动；通过复制内容并移动-50%实现视觉无缝循环；最后可调节animation-duration控制速度，添加:hover暂停动画。

在 CSS 中使用 animation 制作滚动元素动画，通常用于无缝滚动文字、图片列表等场景，比如跑马灯效果或自动轮播。核心思路是通过 @keyframes 定义位移动画，并配合元素布局实现连续滚动。

1. 基本结构与布局

先构建一个容器和滚动内容。容器设置为固定宽度并隐藏溢出，内部元素横向排列或纵向堆叠，超出部分不可见。

<div class="scroll-container">
  <div class="scroll-content">
    <span>滚动项1</span>
    <span>滚动项2</span>
    <span>滚动项3</span>
    <span>滚动项4</span>
  </div>
</div>

CSS 设置容器限制可视区域：

.scroll-container {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
  padding-left: 100%; /* 初始偏移可选 */
}

2. 使用 @keyframes 定义滚动动画

通过 transform: translateX() 实现平滑位移。例如从右到左滚动，将元素向左移动自身宽度。

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

然后应用动画到滚动内容：

.scroll-content {
  animation: scroll 10s linear infinite;
}

这会让内容在 10 秒内从右向左匀速滚动，并无限循环。

3. 实现无缝滚动技巧

要让滚动看起来连续不跳跃，常见方法是复制内容项，使总长度超过两倍容器宽度。

原木风数学元素设计矢量素材

原木风数学元素设计矢量素材适用于教育材料（制作儿童学习材料，如数字学习卡片，让儿童在可爱和有趣的环境中学习数字）、活动海报（制作各种涉及数字主题的活动海报，如数学竞赛、数字猜谜游戏等）、产品设计（各种产品设计，如T恤、包包、家居用品等）、广告设计（各种广告宣传材料，如海报、横幅、传单等）等相关设计的AI格式素材。

0 查看详情原木风数学元素设计矢量素材

HTML 示例：

<div class="scroll-content">
  <span>滚动项1</span>
  <span>滚动项2</span>
  <span>滚动项3</span>
  <span>滚动项4</span>
  <span>滚动项1</span>
  <span>滚动项2</span>
  <span>滚动项3</span>
  <span>滚动项4</span>
</div>

动画只需从起始位置移动到一半内容的位置，视觉上就能实现无缝衔接。

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

这样当内容移动到后半段开始时，前半段刚好完全移出，形成循环错觉。

4. 控制动画速度与暂停

调整 animation-duration 可控制滚动速度。数值越小越快。

若希望鼠标悬停时暂停滚动：

.scroll-content:hover {
  animation-play-state: paused;
}

基本上就这些。关键是布局合理、动画定义准确，并利用内容重复实现视觉无缝。不复杂但容易忽略细节。

以上就是在css中如何用animation制作滚动元素动画的详细内容，更多请关注其它相关文章！

上一篇：如何利用ES6及更高版本的新特性提升代码质量？

下一篇：使用 SVG 元素绘制标准菱形教程

在css中如何用animation制作滚动元素动画

发布时间：2025-10-06

点击量：

1. 基本结构与布局

2. 使用 @keyframes 定义滚动动画

3. 实现无缝滚动技巧

4. 控制动画速度与暂停

返回

4008988990