Heim > Artikel > Web-Frontend > 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
- 巴扎黑Original
- 2018-05-28 17:36:528567Durchsuche
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!