css实现鼠标移入移出动态效果
程序员文章站
2022-03-30 07:59:11
...
这篇文章主要介绍了关于css实现鼠标移入移出动态效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
知识点：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实现鼠标移入移出动态效果的详细内容，更多请关注其它相关文章！
推荐阅读
-
纯CSS3实现鼠标悬停提示气泡效果
-
CSS鼠标悬停菜单 图片交换技术实现
-
CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose
-
css动画效果——初学者的看法：实现鼠标移入菜单栏文字下出现下划线
-
求教，有这么一个效果，当把鼠标放上去二维码慢慢的出来，鼠标离开二维码慢慢的下去，怎么去实现。_html/css_WEB-ITnose
-
完全用CSS实现鼠标移动到图片并更换图片
-
浅谈CSS3鼠标移入图片动态提示效果（transform）
-
css3+伪元素实现鼠标移入时下划线向两边展开的效果
-
vue实现鼠标移入移出事件代码实例
-
无需JS和jQuery代码实现CSS3鼠标浮动放大图片