如何在CSS中实现卡片滚动动画_通过CSS animation和transform translateY实现卡片滚动效果-css教程-PHP中文网

如何在CSS中实现卡片滚动动画_通过CSS animation和transform translateY实现卡片滚动效果

P粉602998670

发布： 2025-11-25 13:47:02

原创

174人浏览过

使用CSS的animation与transform: translateY可实现卡片自动上下滚动。首先构建包含多个.card的.card-container容器，设置固定高度并隐藏溢出；通过@keyframes定义从translateY(0)到translateY(-100%)的动画，使内容线性向上移动；为实现无缝滚动，可复制一份卡片内容，并将动画终点改为translateY(-50%)，形成视觉连贯循环；结合infinite属性让动画持续播放，适用于公告栏、排行榜等场景，无需JavaScript即可完成流畅滚动效果。

如何在css中实现卡片滚动动画_通过css animation和transform translatey实现卡片滚动效果

想让一组卡片自动上下滚动展示内容？用CSS的animation和transform: translateY就能轻松实现，无需JavaScript。关键在于设置一个持续位移动画，让卡片容器平滑地向上或向下“流动”。

基本结构：HTML布局

先搭建简单的HTML结构。用一个外层容器包裹所有卡片，确保溢出隐藏，内部卡片垂直排列：

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
</div>

登录后复制

CSS样式与动画定义

通过CSS设置容器为固定高度并隐藏溢出，使用@keyframes定义从0到负Y位移的动画，使内容向上滚动：

关键点： 动画的from是translateY(0)，to是translateY(-100%)，表示整体上移一个容器高度。

智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

查看详情

立即学习“前端免费学习笔记（深入）”；

.card-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card {
  height: 100px;
  margin: 10px 0;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.card-container {
  animation: scrollCards 6s linear infinite;
}

@keyframes scrollCards {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

登录后复制