当前位置:Gxlcms > css > css实现鼠标移入移出动态效果

css实现鼠标移入移出动态效果

时间:2021-07-01 10:21:17 帮助过:243人阅读

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

以上就是css实现鼠标移入移出动态效果的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行