css實現滑鼠移入移出動態效果
- 不言原創
- 2018-05-03 14:38:178964瀏覽
這篇文章主要介紹了關於css實現滑鼠移入移出動態效果，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
知識點：transform-origin
相容性：IE10以上
<!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>相關推薦：
#以上是css實現滑鼠移入移出動態效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn