Erstellen Sie mit HTML und CSS ein Infinite-Scrolling-Marquee

Das Hinzufügen von Animationen zu Ihrer Website kann Ihre Website interaktiver und schöner machen. Eine der besten Möglichkeiten, dies zu erreichen, besteht darin, einen Laufrahmen zu erstellen – eine sehr elegante Animation, die über glatte Inhalte wie Fähigkeiten oder Tools gleitet und Ihre Website hervorhebt.

In diesem Tutorial zeige ich Ihnen, wie Sie mit nur HTML und CSS einen Infinite-Scroll-Laufrahmen erstellen.

Was ist ein Festzelt?

Ein Laufrahmen ist eine einfache Animation, bei der sich Inhalte endlos über den Bildschirm bewegen. Dies kann verwendet werden, um Text wie Fähigkeiten, Technologien und Funktionen zu präsentieren.

Lassen Sie es uns codieren

HTML-Struktur

Erstellen Sie zunächst die HTML-Struktur

<div>



<p>Each  contains a skill or item, and the two identical  blocks ensure continuous scrolling.

</p><p><strong>CSS</strong></p>

<p>Now add the css style for scrolling<br>
</p>

<pre class="brush:php;toolbar:false">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161616;
  }

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

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

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

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

Wie es funktioniert

Flüssige Animation:

Die @keyframes-Regel gibt den sanften Bildlaufeffekt an und die Animationseigenschaft wendet ihn auf

an.

Nahtlose Schleife:

Zwei identische

Abschnitte erzeugen die Illusion eines endlosen Scrollens, indem sie einen Block auf halbem Weg beginnen.

Hover-Effekt:

Wenn Sie mit der Maus über ein Element fahren, ändert sich dessen Hintergrund in dieses leuchtende Rosa (#f52789).

Passen Sie Ihr Festzelt an

Ändern Sie die Elemente: Aktualisieren Sie die -Tags, um Ihre eigenen Inhalte wie Dienste, Tools oder Erfahrungsberichte anzuzeigen.

Geschwindigkeit anpassen: Verwenden Sie die CSS-Variable --t, um die Animationsdauer zu steuern. Ein kleinerer Wert macht es schneller.

Farben ändern: Passen Sie die Hintergrund- und Textfarbe an Ihr Thema auf der Website an.

Abschluss

Ein Laufrahmen ist eine einfache, aber leistungsstarke Funktion, mit der Sie Ihre Website ansprechend gestalten können. In diesem Tutorial erfahren Sie, wie Sie ganz einfach einen Laufrahmen erstellen, der auf Ihre Inhalts- und Designvorlieben zugeschnitten ist. Probieren Sie es aus.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit HTML und CSS ein Infinite-Scrolling-Marquee. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!