首页 >web前端 >css教程 > 正文

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

原创2020-10-22 13:18:1404248
这篇文章主要介绍了关于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实现鼠标移入移出动态效果的详细内容,更多请关注php学习网其它相关文章!

phpStudy Linux 面板(小皮面板)
  • 相关标签:css 样式表 动态
  • 本文原创发布php学习网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    php学习网

    认证0级讲师

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类