So implementieren Sie das Auf- und Abwärtsscrollen in CSS

CSS zum Erzielen des Auf- und Abwärtsscrollens

Beim Webdesign und der Webentwicklung ist es eine häufige Anforderung, den Auf- und Abwärtsscrolleffekt von Text zu erreichen. Im Folgenden stellen wir eine CSS-basierte Methode vor, um das Scrollen nach oben und unten zu erreichen.

Schritt 1: Definieren Sie den Container

In HTML müssen wir zunächst einen Container definieren, der den Inhalt enthält, der gescrollt werden muss. Sie können Divs als Container oder andere HTML-Elemente verwenden.

Codebeispiel:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

Schritt 2: Stil festlegen

Wir verwenden CSS, um den grundlegenden Stil des Containers festzulegen, einschließlich Breite, Höhe, Rahmen usw. Gleichzeitig müssen wir das Attribut overflow: versteckt verwenden, um Inhalte außerhalb des Containerbereichs auszublenden, damit der Inhalt frei innerhalb des Containers scrollen kann. overflow: hidden属性隐藏超出容器范围的内容，使得内容能够在容器内自由滚动。

代码示例：

.scroll-container {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

步骤三：实现滚动效果

在容器内，我们需要定义一个元素作为滚动的“窗口”，用于显示需要滚动的内容。我们可以使用定位方式，将这个滚动窗口放置在容器内部，并设置其初始位置。

为了实现滚动效果，我们需要使用CSS的animation属性，定义一个动画。在动画中，我们可以控制滚动窗口的位置，使其向上或向下移动，同时设置滚动的速度。

代码示例：

.scroll-container {
  position: relative;
}

.scroll-container p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: scroll 10s linear infinite;
}

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

在上面的示例中，我们将滚动窗口定义为scroll-container元素内的子元素p，并将其放置在scroll-container容器的左上角。接着，我们使用position: absolute将其与容器脱离文档流，并使用top: 0和left: 0将其放置在容器的最上面。

在animation属性中，我们使用scroll作为动画名称，并设置其持续时间为10秒，时间函数为linear，表示匀速运动。infinite表示动画持续无限次。接下来，我们在@keyframes scroll中定义动画的具体过程，其中transform: translateY(-100%)

Codebeispiel:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

Schritt 3: Scrolleffekt implementieren

Im Container müssen wir ein Element als scrollbares „Fenster“ definieren, um den Inhalt anzuzeigen, der gescrollt werden muss. Mithilfe der Positionierung können wir dieses Scrollfenster im Container platzieren und seine Anfangsposition festlegen.

Um den Scrolleffekt zu erzielen, müssen wir das animation-Attribut von CSS verwenden, um eine Animation zu definieren. In der Animation können wir die Position des Bildlauffensters steuern, es nach oben oder unten verschieben und die Geschwindigkeit des Bildlaufs festlegen. 🎜🎜Codebeispiel: 🎜rrreee🎜Im obigen Beispiel definieren wir das Scroll-Fenster als untergeordnetes Element p innerhalb des scroll-container-Elements und platzieren es innerhalb des scroll-container element. code>scroll-containerDie obere linke Ecke des Containers. Als nächstes entfernen wir es mit position: absolute aus dem Dokumentenfluss und platzieren es mit top: 0 und left: 0 im Container die Spitze von. 🎜🎜Im Attribut animation verwenden wir scroll als Animationsnamen und stellen die Dauer auf 10 Sekunden und die Zeitfunktion auf linear ein , was gleichförmige Bewegung bedeutet. unendlich bedeutet, dass die Animation auf unbestimmte Zeit fortgesetzt wird. Als Nächstes definieren wir den spezifischen Prozess der Animation in @keyframes scroll, wobei transform: translatorY(-100%) bedeutet, dass die Höhe des Bildlauffensters nach oben verschoben wird, um einen Bildlaufeffekt zu erzielen . 🎜🎜Schritt 4: Vollständiger Code🎜🎜Die oben genannten Schritte sind ineinander integriert und der endgültige vollständige Code lautet wie folgt: 🎜rrreee🎜Die oben genannten Schritte und der vollständige Code für die Verwendung von CSS zum Erzielen eines Auf- und Abwärtsscrollens können unterschiedlich sein Dies wird durch Ändern der Stile des Containers und des Rollfensters erreicht. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Auf- und Abwärtsscrollen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!