Web-Frontend
CSS-Tutorial
Wie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt
Wie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt
Manchmal sehen wir einen solchen Effekt auf einer Webseite, wenn die Maus auf bestimmte Texte oder Bilder gesetzt wird. Dies ist also ein relativ abstrakter Vorgang passiert. Lassen Sie uns den Animationseffekt des css3-Übergangs vorstellen.
Der CSS3-Übergang ist untrennbar mit dem Übergangsattribut verbunden. Der allmähliche Übergangseffekt von Änderungen wird als Übergangsanimation bezeichnet.
Dann werfen wir einen Blick darauf, wie das Übergangsattribut von CSS3 den Übergangseffekt konkret implementiert.
Werfen wir zunächst einen Blick auf die Definition und Verwendung des Übergangsattributs:
Das Übergangsattribut ist ein Kurzattribut, das zum Festlegen von vier Übergangsattributen verwendet wird .
transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt.
Übergangsdauer: Gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.
transition-timing-function: Gibt den Geschwindigkeitsverlauf des Geschwindigkeitseffekts an.
Übergangsverzögerung: Definiert, wann der Übergangseffekt beginnt.
Nachdem Sie die kurze Einführung in die Definition und Verwendung des Übergangsattributs gelesen haben.
Jetzt werfen wir einen Blick auf einen CSS3-Code, der den Übergangseffekt implementiert:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置浏览器默认的两个值，
对本文没有太大影响，不知道可以无视*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 400px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "华文行楷";
background: #000;
color:#F60;
transition-property: all;/*变化的东西。all是所有*/
transition-duration: 1s;/*变化过程的时间*/
transition-timing-function: linear;/*linear是匀速变化*/
transition-delay: 0s;/*没有延迟变化*/
/*下面的是简写属性*/
/*
transition:all 1s linear 0s;
*/
}
.div1:hover{
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
</style>
</head>
<body>
<div>PHP中文网火焰字</div>
</body>
</html>Schließlich werfen wir einen Blick auf den CSS3-Übergangseffekt:
CSS3-Übergangseffektprozess:
CSS3-Übergangseffektergebnis:
Über die Übergangsattribut Weitere Informationen zur Verwendung finden Sie im CSS3-Lernhandbuch.
Verwandte Empfehlungen:
3D-Bildübergangseffekte implementiert mit CSS3-Animation_html/css_WEB-ITnose
Über CSS3 Verwenden Sie den Übergang Attribut, um Übergangseffekte zu erzielen
Das obige ist der detaillierte Inhalt vonWie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt. 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
1377
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
CSS-Übergangseffekt: So erzielen Sie den Ein- und Ausblendeffekt von Elementen
Nov 21, 2023 am 08:03 AM
CSS-Übergangseffekt: So erzielen Sie den Ein- und Ausblendeffekt von Elementen Einführung: Im Webdesign ist die Gestaltung von Elementen mit Übergangseffekten eines der wichtigsten Mittel zur Verbesserung der Benutzererfahrung. Der Fade-In-Fade-Out-Effekt ist ein allgemeiner und prägnanter Übergangseffekt, der Elemente von Grund auf erscheinen lassen kann, von flach nach tief. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den Ein- und Ausblendeffekt von Elementen erzielen, und es werden spezifische Codebeispiele aufgeführt. 1. Verwenden Sie das Übergangsattribut, um den Ein- und Ausblendeffekt des Elements zu erzielen. Das Übergangsattribut von CSS kann dem Element Elemente hinzufügen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
Apr 28, 2022 pm 04:32 PM
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".
