Web-Frontend
CSS-Tutorial
Ausführliche Erläuterung von Beispielen für die Implementierung eines reibungslosen Übergangs durch CSS3 beim Verlassen des Hovers
Ausführliche Erläuterung von Beispielen für die Implementierung eines reibungslosen Übergangs durch CSS3 beim Verlassen des Hovers
In diesem Artikel werden hauptsächlich CSS3-Beispiele für sanfte Übergangseffekte beim Verlassen der Pseudoklasse vorgestellt. Interessierte können mehr darüber erfahren.
Aufgrund des durch das Hover-Pseudo hinzugefügten Animationseffekts -Klasse, es ist nur verfügbar, wenn es ausgelöst wird, wenn die Maus auf dem Element platziert wird. Wenn die Maus es verlässt, wird der Effekt unterbrochen und es erscheint sehr steif.
Die Idee der meisten Leute ist, die Onmouseover- und Onmouseleave-Ereignisse von js zu verwenden, um Animationseffekte zu erzielen. Tatsächlich muss es nicht so mühsam sein, CSS3 kann Ihnen bei der Lösung dieser Probleme helfen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>离开时效果生硬</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
}
p:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Da das p-Element nur zum p-Element hinzugefügt werden kann, wenn die Pseudoklasse :hover ausgelöst wird.
Wenn die Maus das p-Element verlässt, wird die Pseudoklasse :hover nicht mehr wirksam und der in Hover geschriebene Animationseffekt geht sofort verloren.
Zu diesem Zeitpunkt sollten wir einen identischen Übergangseffekt auf das ursprüngliche Element schreiben, um den unterbrochenen Animationseffekt fortzusetzen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单解决</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一个transition */
transition: all 1s linear;
}
p:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Zu diesem Zeitpunkt kehrt die Maus unverändert zurück, egal wann sie das Element verlässt.
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Implementierung eines reibungslosen Übergangs durch CSS3 beim Verlassen des Hovers. 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
1359
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-Tipp: Verwenden Sie den Übergang, um den Hover-Status beizubehalten
Sep 27, 2022 pm 02:01 PM
Wie kann der Schwebezustand beibehalten werden? Im folgenden Artikel erfahren Sie, wie Sie den Hover-Status beibehalten, ohne JavaScript zu verwenden. Ich hoffe, er hilft Ihnen weiter!
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.
Erleben Sie einen Flug mit der Haval X1-Kamera
Jan 15, 2024 pm 02:21 PM
Wir können im Internet oft viele wunderbare Top-Down-Videos sehen. Die von Drohnen aufgenommenen Bilder sind jedoch tatsächlich nur begrenzte Kenntnisse über Drohnen Wo ist das Fliegen eingeschränkt? Tatsächlich sind flugfertige „Drohnen“ der aktuelle Mainstream und die Wahl der meisten Menschen ist eher würdig. Heute werde ich Ihnen ein praktisches Erlebnis mit der Harvest Flying Camera X1 geben. Optisch verfügt die Harvest Flying Camera X1 über das erste Faltdesign. Die gesamte Kamera wiegt nur 125 g und ist damit leichter als ein Mobiltelefon. Vier weich gefärbte Blätter und ein Sicherheitsrahmendesign schützen perfekt die Sicherheit beim Schießen. Dyed Leaf verwendet auf innovative Weise ein biobasiertes biologisches Substrat, das hochelastisch, langlebig, sicher und umweltfreundlich ist. Außerdem verfügt es über einen vollständig schützenden Rahmen, um Ihre Hände beim Start und bei der Landung zu schützen.
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 entfernen Sie das Hover-Ereignis in CSS
Feb 01, 2023 am 10:06 AM
Methoden zum Entfernen von CSS-Hover-Ereignissen: 1. Durch "$("a").hover(function(){ alarm('mouseover'); }, function(){ Alert('mouseout'); })"-Methode zum Binden des Hover-Ereignisses; 2. Lösen Sie die Bindung des Hover-Ereignisses über die Methode "$('a').off('mouseenter').unbind('mouseleave');". Dürfen.
