In diesem Artikel wird hauptsächlich beschrieben, wie Sie mit css3 den Effekt erzielen, die Länge der Maus beim Einfahren zu ändern .
Beim Frontend-Seitendesign ist die Funktion von CSS äußerst leistungsstark. Solange Sie es gut nutzen, können Sie auf vielen Websites verschiedene wunderbare dynamische Effekte erzielen. Daher habe ich Ihnen im vorherigen Artikel auch einige Methoden zur Verwendung von CSS zum Erzielen von Animationseffekten vorgestellt, z. B. [Wie erzielt man Rotations- und Bewegungseffekte in CSS3-Animationen? ] [Wie erreiche ich den langsamen Vergrößerungseffekt von Bildern, wenn ich mit der Maus in CSS3 fahre?] Freunde in Not können darauf verweisen.
Im Folgenden kombinieren wir ein einfaches Codebeispiel, um Ihnen die CSS3-Methode vorzustellen und den Effekt zu erzielen, dass das Div länger wird, wenn sich die Maus in das Div bewegt.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
<style>
.hover{
width: 200px;
height: 200px;
border-radius: 10px;
background: red;
margin-top: 100px;
margin-left: 100px;
transition: width 2s;
}
.hover:hover{
background: blue;
width: 500px;
}
</style>
</head>
<body>
<div class="hover">
hover
</div>
</body>
</html>Tatsächlich ist dieser Effekt sehr einfach und einfach. Beherrschen Sie hauptsächlich die Verwendung von :Hover-Selektor und Übergang.
:Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.
Übergangsübergang ist ein zusammengesetztes Attribut, das die vier Untereigenschaften Übergangseigenschaft, Übergangsdauer, Übergangszeitfunktion und Übergangsverzögerung umfasst. Durch die Zusammenarbeit dieser vier Unterattribute wird ein vollständiger Übergangseffekt erreicht
Der durch den obigen Code im Vordergrund erzielte Effekt ist wie folgt:
In diesem Artikel geht es um css3s Methode zur Realisierung des Mouse-In-Effekts mit variabler Länge Es ist auch sehr einfach für Freunde in Not.
Wenn Sie mehr über Frontend-bezogenes Wissen erfahren möchten, können Sie der chinesischen PHP-Website CSS3-Video-Tutorial, CSS-Video-Tutorial, Bootstrap-Tutorial folgen usw. Verwandte Tutorials, auf die jeder gerne zurückgreifen und sie studieren kann!
Weitere coole CSS3-, HTML5- und Javascript-Spezialeffektcodes finden Sie unter: Javascript-Spezialeffektsammlung
Das obige ist der detaillierte Inhalt vonWie erreicht man den Verlängerungseffekt, wenn die Maus in CSS3 nach oben bewegt wird? (Bilder + Videos). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
