文本股票 CSS

本文将介绍文本股票（text ticker）的实现，并附带详细的 CSS 代码示例。文本股票指的是一段文本在固定区域内以横向滚动的方式展示，常用于展示动态信息。

实现思路

文本股票的实现基于 CSS 动画和 JavaScript 脚本。我们需要用 CSS 定义一个宽度固定、高度可变的容器，将文本放入其中，并将容器设置为超出部分隐藏。然后，通过 JavaScript 调整容器内文本的位置，从而实现文本滚动的效果。

HTML 结构

文本股票的 HTML 结构通常包含一个滚动容器和要展示的文本。HTML 代码如下：

<div class="ticker">
  <span class="ticker-text">这里是要展示的文本，可以是一段话、一首诗、一条消息等等。</span>
</div>

其中，.ticker 类表示容器，.ticker-text 类表示要滚动的文本。

CSS 样式

接下来，我们需要用 CSS 定义容器的样式，如下所示：

.ticker {
  width: 100%; /* 宽度固定 */
  height: 40px; /* 高度可变 */
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 文本不换行 */
  position: relative; /* 相对定位 */
  border: 1px solid #ccc; /* 边框 */
}

然后，我们再定义要滚动的文本的样式：

.ticker-text {
  display: inline-block; /* 行内块元素 */
  padding-left: 100%; /* 左侧内边距 */
  animation: ticker 10s linear infinite; /* 动画 */
}

其中，.ticker-text 类的 padding-left 属性值需要设置为容器宽度的百分之百，这样文本才能完全进入容器内，被超出部分隐藏。.ticker-text 类的 animation 属性表示动画名称 ticker、动画持续时间 10s、动画速度 linear 及循环模式 infinite。

最后，我们再定义动画的样式：

@keyframes ticker {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置 */
  }
}

@keyframes 定义了名为 ticker 的动画，包含 0% 和 100% 两个关键帧。动画效果为从初始位置（0%）到结束位置（100%）向左平移容器宽度的百分之百，即使文本完全出现在容器内。

完整代码

HTML 代码：

<div class="ticker">
  <span class="ticker-text">这里是要展示的文本，可以是一段话、一首诗、一条消息等等。</span>
</div>

CSS 代码：

.ticker {
  width: 100%;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border: 1px solid #ccc;
}

.ticker-text {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 10s linear infinite;
}

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

我们可以根据实际需求，对容器和文本的样式进行调整，从而实现不同的文本滚动效果。