Heim >Web-Frontend >CSS-Tutorial >CSS, um dynamische Effekte der Mausbewegung nach innen und außen zu erzielen
CSS, um dynamische Effekte der Mausbewegung nach innen und außen zu erzielen
- 不言Original
- 2018-05-03 14:38:178962Durchsuche
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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS-Attribute relative Positionierung, absolute Positionierung, feste PositionierungNächster Artikel：CSS-Attribute relative Positionierung, absolute Positionierung, feste Positionierung