鼠标滑过元素动态边框运动

最新推荐文章于 2021-06-03 03:02:50 发布

乐夫天命兮

最新推荐文章于 2021-06-03 03:02:50 发布

阅读量214

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/95228439

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停边框运动效果</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
	list-style:none;
}
img {
	border:0;
	width:300px;
	height:150px;
}
.box {
	width:300px;
	height:150px;
	margin:20px auto;
	position:relative;
	border:1px solid #eee;
}
.box .border-left {
	width:1px;
	height:0px;
	background:red;
	position:absolute;
	left:-1px;
	bottom:0;
}
.box .border-bottom {
	width:0px;
	height:1px;
	background:red;
	position:absolute;
	left:0;
	bottom:0px;
}
.box .border-top {
	width:0px;
	height:1px;
	background:red;
	position:absolute;
	right:0;
	top:0px;
}
.box .border-right {
	width:1px;
	height:0px;
	background:red;
	position:absolute;
	right:-1px;
	top:0;
}
</style>
</head>
<body>
<div class="box">
	<img src="img/3.jpg">
	<div class="border-left"></div>
	<div class="border-bottom"></div>
	<div class="border-top"></div>
	<div class="border-right"></div>
</div>
<div class="box">
	<img src="img/3.jpg">
	<div class="border-left"></div>
	<div class="border-bottom"></div>
	<div class="border-top"></div>
	<div class="border-right"></div>
</div>


<script>
$(function() {
    var lanren_width = $('.box').width();
    var lanren_height = $('.box').height();
    $('.box').each(function() {
        $(this).hover(function() {
            $(this).find('.border-left,.border-right').stop().animate({
                height: lanren_height + 'px'
            }, 400);
            $(this).find('.border-top,.border-bottom').stop().animate({
                width: lanren_width + 'px'
            }, 400);
        }, function() {
            $(this).find('.border-left,.border-right').stop().animate({
                height: '0'
            }, 400);
            $(this).find('.border-top,.border-bottom').stop().animate({
                width: '0'
            }, 400);
        });
    });
});
</script>

</body>
</html>