Methode: 1. Verwenden Sie die Anweisung „body{animation: name time}“, um die Animation an den Körper des Webseitenelements zu binden. 2. Verwenden Sie zum Festlegen die Anweisung „@keyframes name {0%{opacity:0;}}“. Die Animation für die Webseite wird im Keyframe eingeblendet. Mit dem Opazitätsattribut wird die Transparenz des Elements festgelegt.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie den Einblendeffekt einer Webseite in CSS3
In CSS können Sie das Animationsattribut und die @keyframes-Regel verwenden, um den Animationseffekt der Änderung der Breite des Elements zu erzielen Mit der @keyframes-Regel können Sie Animationen erstellen.
Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern.
Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Verwenden Sie das Opazitätsattribut, um die Animationsaktion festzulegen. Mit dieser Eigenschaft wird die Transparenz eines Elements festgelegt. Das Syntaxformat des
animation-Attributs lautet wie folgt:
animation: name duration timing-function delay iteration-count direction;
Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style>
body{
animation:fadenum 10s;
}
@keyframes fadenum{
0%{opacity: 0;}
}
</style>
</head>
<body>
<img src="/static/imghwm/default1.png" data-src="1118.02.png" class="lazy" alt="So erzielen Sie den Einblendeffekt von Webseiten in CSS3" >
网页元素
</body>
</html>Ausgabeergebnis:
(Freigabe von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Einblendeffekt von Webseiten in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
'CSS4' UpdateApr 11, 2025 pm 12:05 PMDa ich das CSS4¹ zum ersten Mal eingemischt habe, gab es eine Menge mehr Diskussion darüber. Ich werde meine Lieblingsgedanken von anderen hier zusammenschließen. Es gibt
Die drei Arten von CodeApr 11, 2025 pm 12:02 PMJedes Mal, wenn ich ein neues Projekt starte, organisiere ich den Code, den ich in drei Typen oder Kategorien betrachte, wenn Sie möchten. Und ich denke, diese Typen können auf angewendet werden
Https ist einfach!Apr 11, 2025 am 11:51 AMIch war schuldig, die Komplexität von Https öffentlich beklagt zu haben. In der Vergangenheit hat ich SSL-Zertifikate von Drittanbietern gekauft und hatte Probleme
HTML -DatenattributehandbuchApr 11, 2025 am 11:50 AMAlles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.
Unveränderlichkeit im JavaScript verstehenApr 11, 2025 am 11:47 AMWenn Sie in JavaScript noch nicht mit Unveränderlichkeit gearbeitet haben, ist es möglicherweise einfach, sie mit der Zuweisung einer Variablen für einen neuen Wert oder einer Neuzuweisung zu verwechseln.
Benutzerdefinierte Styling -Formulareingaben mit modernen CSS -FunktionenApr 11, 2025 am 11:45 AMEs ist durchaus möglich, benutzerdefinierte Kontrollkästchen, Optionsfelder und Schalter zu erstellen und gleichzeitig semantisch und zugänglich zu bleiben. Wir brauchen nicht einmal eine
FußnoteApr 11, 2025 am 11:34 AMEs gibt spezielle Superset -Nummer -Charaktere, die manchmal perfekt für Fußnoten sind. Hier sind sie:
So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScriptApr 11, 2025 am 11:29 AMHaben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr
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
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
