這篇文章主要介紹了關于css實現鼠標移入移出動態效果，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

知識點：transform-origin

兼容性：IE10以上

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)

}

Hover Me

相關推薦：

純css實現鼠標移入逐漸高亮

總結

以上是生活随笔為你收集整理的html鼠标移除的效果,css实现鼠标移入移出动态效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。