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

Posted 2020-08-05 千里皓月

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了运动的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>

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

以上是关于运动的border，仿当当简易效果的主要内容，如果未能解决你的问题，请参考以下文章

仿一个好玩的滑动效果

CSS3 流动边框（仿王者荣耀等待效果）的三种实现方式

仿支付宝笑脸刷新加载动画的实现

简易加载效果----疯狂吃豆人

仿github404页面特效