时间:2021-07-01 10:21:17 帮助过:243人阅读
知识点: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实现鼠标移入逐渐高亮
以上就是css实现鼠标移入移出动态效果的详细内容,更多请关注Gxl网其它相关文章!