按钮飞线

最新推荐文章于 2025-03-29 10:00:02 发布

hxj_1112

最新推荐文章于 2025-03-29 10:00:02 发布

阅读量352

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端

本文链接：https://blog.youkuaiyun.com/sparkesfly/article/details/51916277

WEB前端专栏收录该内容

1 篇文章

订阅专栏

暑假实验室学习的一个小知识，幽灵按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>线条移动</title>
	</head>
	<style>
	    .contain{
	    	margin: 100px 0 0 200px;
	    	height: 500px;
	    	width: 500px;
	    	border: 2px solid #000;	  
	    	background-color: antiquewhite;   	
	    	position: relative;
	    	
	    }
	    .contain:hover ._right{width: 50px; right: 0px;}
	    .contain:hover ._bottom{height: 50px; bottom: 0px;}
	    .contain:hover ._left{width: 50px; left: 0px;}
	    .contain:hover ._top{height: 50px; top: 0px;}
	    
	    .contain span{position: absolute; background: #000; transition:all 0.6s}
	    .contain ._top{top:152px; left: 352px;height: 0; width: 2px;}
	    .contain ._bottom{bottom: 152px; right: 348px; height: 0; width: 2px;}
	    .contain ._left{top: 150px; left: 160px; width: 0; height: 2px;}
	    .contain ._right{bottom: 146px; right: 160px;  width: 0; height: 2px;}
	    
	    .contain img{
	    	border: 2px solid #000;
	    	margin: 150px;
	    }

	</style>
	<body>	 
		<div class="contain">	
			<span class="_top"></span>
			<span class="_right"></span>
			<span class="_bottom"></span>
			<span class="_left"></span>
			<img src="img/2.jpg/" alt="1">				
		</div>
		
	</body>
</html>