這篇文章主要介紹了關(guān)于css實(shí)現(xiàn)鼠標(biāo)移入移出動態(tài)效果，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

知識點(diǎn)：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)坐標(biāo)為基本點(diǎn)移動即縮小到0倍---->scaleX(0)

}

p:hover::before {

transform: scaleX(1);

transform-origin: 0 0;//以(0,0)坐標(biāo)為基本點(diǎn)移動即放大到1倍---->scaleX(1)

}

Hover Me

相關(guān)推薦：

純css實(shí)現(xiàn)鼠標(biāo)移入逐漸高亮

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。