这篇文章主要介绍了关于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实现鼠标移入逐渐高亮