Dieser Artikel stellt hauptsächlich den dynamischen Effekt des Ein- und Ausfahrens der Maus vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.
Wissenspunkt -origin
Kompatibilität: IE10 oder höher
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p {
position: absolute;
width: 200px;
height: 60px;
text-align: center;
margin: 10px auto;
}
p::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: transform .5s;
transform: scaleX(0);
transform-origin: 100% 0;//以（100%,0）坐标为基本点移动即缩小到0倍---->scaleX（0）
}
p:hover::before {
transform: scaleX(1);
transform-origin: 0 0;//以（0,0）坐标为基本点移动即放大到1倍---->scaleX（1）
}
</style>
</head>
<body>
<p>Hover Me</p>
</body>
</html>Verwandte Empfehlungen:
Reines CSS, um eine allmähliche Hervorhebung zu realisieren, wenn die Maus hinein bewegt wird
Das obige ist der detaillierte Inhalt vonCSS, um dynamische Effekte der Mausbewegung nach innen und außen zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
