运动的border，仿当当简易效果

突然想到以前看到当当上有个效果，当鼠标移上去，图片边框是运动添加上的，还以为是css3或者是canvas做的呢，做完幽灵按钮后，才知道，so  easy,只不过是animate+position的杰作。附上代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0}

div.child{
	position: relative;
	margin: 100px auto;
	width: 200px;
	height: 200px;
	border: 2px solid #bbb;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	background: #ccc;
}
.line{
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	background: red;
}
.line-top{
	/*width: 200px;
	height: 2px;*/
	left: -2px;
	top: -2px;
}
.line-right{
	/*width: 2px;
	height: 200px;*/
	right: -2px;
	top: -2px;
}
.line-bottom{
	/*width: 200px;
	height: 2px;*/
	right: -2px;
	bottom: -2px;

}
.line-left{
	/*width: 2px;
	height: 200px;*/
	left: -2px;
	bottom: -2px;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
	$('.child').hover(function(){
		$('.line-top').animate({
			width: '200px',
			height: '2px'
		},1000);
		$('.line-right').animate({
			width: '2px',
			height: '200px'
		},1000);
		$('.line-bottom').animate({
			width: '200px',
			height: '2px'
		},1000);
		$('.line-left').animate({
			width: '2px',
			height: '200px'
		},1000);
	},function(){
		$('.line').animate({
			width: '0px',
			height: '0px'
		},1000);
	});
});
</script>
</head>
<body>
<div class="child">
	<span class="line line-top"></span>
	<span class="line line-right"></span>
	<span class="line line-bottom"></span>
	<span class="line line-left"></span>
</div>
</body>
</html>

　　当然，其他的你想要的样式，不妨举一反三做一下，也很简单，只是个运动而已

posted @ 2016-08-31 14:40  reaf  阅读(334)  评论(0)    收藏  举报