Heim > Artikel > Web-Frontend > Wie erstelle ich mit HTML und CSS eine Gleittext-Enthüllungsanimation?

Wie erstelle ich mit HTML und CSS eine Gleittext-Enthüllungsanimation?

王林nach vorne: 2023-09-07 16:53:02786Durchsuche

Möglicherweise haben Sie auf verschiedenen Websites (z. B. Websites mit persönlichen Portfolios) oder sogar auf unterschiedlichen Videoinhalten Gleittextanzeigeanimationen gesehen, die den Benutzern ein anderes Erlebnis bieten und den Text lebendiger wirken lassen. Mit HTML und CSS lassen sich ganz einfach Gleittextanimationen erstellen, die die Aufmerksamkeit der Besucher unserer Website auf sich ziehen.

In diesem Artikel erfahren Sie, wie Sie eine verschiebbare Textanzeigeanimation nur mit HTML und CSS erstellen

Wie erstelle ich eine Gleitanimation?

Lassen Sie uns über die Methoden sprechen, mit denen Sie Gleitanimationen erstellen können. Am Anfang der Animation wird unser erster Text angezeigt, in diesem Fall „Guten Morgen“, dann wird der Text nach links verschoben und dann, indem Sie nach rechts schieben, der zweite Text „Wie war Ihr Tag?“

Wir werden Keyframe-Eigenschaften verwenden, um die Animation in verschiedene Teile aufzuteilen, damit die endgültige Animation flüssiger aussieht. Schauen wir uns die Syntax der Keyframe-Eigenschaften an.

Grammatik

@keyframes appear
@keyframes slide
@keyframes reveal

Sie können im Code oben sehen, dass das Keyframe-Attribut verwendet wird. Im erscheinenden Keyframe legen wir fest, wie der erste Text angezeigt wird.

In der Keyframe-Folie verschieben wir den Text horizontal.
In der Keyframe-Anzeige zeigen wir den gesamten Rest des Textes an.

Beispiel

Um besser zu verstehen, was diese Eigenschaft bewirkt, schauen wir uns ein Beispiel für die Erstellung einer Animation an.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of</title>
      <style>
         .container {
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
            padding: 20px;
         }
         .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
         }
         .slide {
            width: 100%;
            text-align: center;
            font-size: 72px;
            font-weight: bold;
            color: #333;
         }
         .slider.slide-1 {
            transform: translateX(0%);
         }
         .slider.slide-2 {
            transform: translateX(-100%);
         }
         .slider.slide-3 {
            transform: translateX(-200%);
         }
      </style>
   </head>
   <body>
      <div class="container">
      <div class="slider">
      <div class="slide">A</div>
      <div class="slide">B</div>
      <div class="slide">C</div>
      <div class="slide">D</div>
      <div class="slide">E</div>
      <div class="slide">F</div>
      </div>
      </div>
      <script>
         var currentSlide = 1;
         var slider = document.querySelector('.slider');
         setInterval(function () {
            currentSlide++;
            if (currentSlide > 26) {
               currentSlide = 1;
            }
            slider.classList.remove('slide-' + (currentSlide - 1));
            slider.classList.add('slide-' + currentSlide);
         }, 1000);
      </script>
   </body>
</html>

Im obigen Code haben wir eine Animation erstellt, die Buchstaben mit einer Übergangszeit von 0,5 Sekunden anzeigt. Der Benutzer kann das Zeitintervall und die Schriftgröße an den spezifischen Anwendungsfall des Benutzers anpassen.

Die Ausgabe kann geändert werden, indem die Anzahl der Buchstaben und die Buchstaben selbst mithilfe von HTML und CSS geändert werden, oder der Benutzer kann JavaScript verwenden, um ein Array zu erstellen und dieses einfach zu durchlaufen.

Beispiel

In diesem Beispiel nehmen wir einige grundlegende Gestaltungsmaßnahmen vor, z. B. das Hinzufügen einer Hintergrundfarbe, das Festlegen der Ausrichtung usw. Dann verwenden wir die Animationseigenschaften und verwenden dann Keyframes, um jeden Frame zu animieren, damit wir eine flüssigere Ausgabe erhalten.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of using the keyframe</title>
      <style>
         body {
            background: black;
         }
         .text {
            width: 20%;
            top: 50%;
            position: absolute;
            left: 40%;
            border-bottom: 5px solid white;
            overflow: hidden;
            animation: animate 2s linear forwards;
         }
         .text h1 {
            color: white;
         }
         @keyframes animate {
            0% {
               width: 0px;
               height: 0px;
            }
            30% {
               width: 50px;
               height: 0px;
            }
            60% {
               width: 50px;
               height: 80px;
            }
         }
      </style>
   </head>
   <body>
      <div class="text">
      <h1> Hi How's your day going?<h1>
   </body>
</html>

Der obige Code ist der kombinierte Code und er gibt uns die folgende Ausgabe

So sieht unsere Ausgabe nach der Verwendung von HTML- und CSS-Code aus.

Fazit

Keyframes können verwendet werden, um Regeln für bestimmte Frames festzulegen, und wir können darin auch verschiedene Stile verwenden, sodass sich die Eigenschaften jedes Mal ändern. Die Angabe von Keyframes erfolgt über Prozentsätze wie 0 % (Beginn der Animation) und 100 % (Ende der Animation). Regeln können auch „von“ oder „bis“ enthalten, die ebenfalls Start und Ende angeben. Die Animation endet.

In diesem Artikel haben wir gelernt, wie man mit HTML und CSS eine Textgleitanimation erstellt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit HTML und CSS eine Gleittext-Enthüllungsanimation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 循环

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：IndexedDB in HTML5Nächster Artikel：IndexedDB in HTML5

In Verbindung stehende Artikel

Mehr sehen