css初级项目文字动画滚动效果-css教程-PHP中文网

css初级项目文字动画滚动效果

P粉602998670

发布： 2025-10-13 20:13:01

原创

312人浏览过

使用纯CSS实现文字从右向左滚动动画，首先创建包含文字的容器，通过设置overflow: hidden和white-space: nowrap保证单行显示并隐藏溢出内容，利用@keyframes定义translateX从100%到-100%的平移动画，并将animation应用于滚动元素，实现无限循环的线性滚动效果，可通过调整animation-duration控制速度，添加:hover状态使动画悬停暂停，适用于公告栏等场景。

css初级项目文字动画滚动效果

想实现一个简单的文字动画滚动效果，比如让一串文字从右向左平滑滚动，可以用纯CSS完成。这种效果常用于新闻标题、公告栏或跑马灯展示，适合CSS初学者练手。

1. 基本HTML结构

先写一个容器和要滚动的文字内容：

<div class="scroll-container">
  <p class="scroll-text">
    欢迎访问我们的网站！最新活动上线了，点击了解更多详情……
  </p>
</div>

登录后复制

2. 核心CSS样式与动画

设置容器宽度并隐藏溢出，用@keyframes定义从右到左的平移动画：

.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #f0f0f0;
  padding: 10px 0;
}

.scroll-text {
  display: inline-block;
  font-size: 18px;
  color: #333;
  animation: scrollLeft 15s linear infinite;
}

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

登录后复制

说明：