html设置鼠标移入移出样式,css实现鼠标移入移出动态效果

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