Web-Frontend
HTML-Tutorial
Wie erstelle ich mit HTML und CSS eine Gleittext-Enthüllungsanimation?
Wie erstelle ich mit HTML und CSS eine Gleittext-Enthüllungsanimation?
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. < /p>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So überprüfen Sie das Bootstrap -Datum
Apr 07, 2025 pm 03:06 PM
Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So setzen Sie die Bootstrap -Navigationsleiste
Apr 07, 2025 pm 01:51 PM
Bootstrap bietet eine einfache Anleitung zum Einrichten von Navigationsleisten: Einführung der Bootstrap -Bibliothek zum Erstellen von Navigationsleistencontainern Fügen Sie Markenidentität hinzu. Erstellen Sie Navigationslinks. Hinzufügen anderer Elemente (optional) Anpassungsstile (optional).
