jQuery+CSS3响应图片边框炫酷动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3响应图片边框炫酷动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery+CSS3响应图片边框炫酷动画特效</title>
<link href="css/base.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

</head>
<body>

<ul class="box">
	<li>
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
		<img src="images/1.jpg" alt="">
		<p>李易峰</p>
	</li>
	<li>
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
		<img src="images/2.jpg" alt="">
		<p>李易峰</p>
	</li>
	<li>
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
		<img src="images/3.jpg" alt="">
		<p>李易峰</p>
	</li>
	<li>
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
		<img src="images/3.jpg" alt="">
		<p>李易峰</p>
	</li>
	<li>
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
		<img src="images/2.jpg" alt="">
		<p>李易峰</p>
	</li>
	<li>
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
		<img src="images/1.jpg" alt="">
		<p>李易峰</p>
	</li>
</ul>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

$(".box li").mouseenter(function(){
	$(this).children("p").animate({
	"height":"40px",}
,500);
	$(this).children("div:even").animate({
	"width":"100%",}
,500).css("background","#02b3bf");
	$(this).children("div:odd").animate({
	"height":"100%",}
,500).css("background","#02b3bf");
}
);
	$(".box li").mouseleave(function(){
	$(this).children("p").animate({
	"height":"0px"}
);
	$(this).children("div:even").animate({
	"width":"0%",}
,500).css("background","#02b3bf");
	$(this).children("div:odd").animate({
	"height":"0%",}
,500).css("background","#02b3bf");
}
);

CSS代码(base.css):

@CHARSET "UTF-8";html{margin:0;padding:0;border:0;}
body,div,span,object,iframe,h1,h2,h3,h4,p,blockquote,pre,a,address,code,b,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;}
body{background:#fff;color:#666;position:relative;font-size:100%;font:12px/1.5 微软雅黑,arial,宋体;vertical-align:baseline;width:100%;overflow-x:hidden;user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;}
a{text-decoration:none;outline:none;}
a:link{color:#666;}
a:visited{color:#666;}
a:hover,a:active,a:focus{color:#666;text-decoration:underline;outline:none;text-decoration:none;}
input{padding:0;margin:0;}
img{border:none;background:none;vertical-align:middle;}
ul,ol,li{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
table,th,td{vertical-align:middle;}
.clearfix:after{content:".";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1}
.clearboth{height:0px;line-height:0px;overflow:hidden;clear:both;font-size:0px;}
h1,h2,h3,h4{font-size:12px;font-weight:bold;}
hr{border:0;border-top:1px solid #ccc;height:0;}
/* -----------------------------华丽的分割线---------------------------------- */

CSS代码(main.css):

@CHARSET "UTF-8";.box{width:1200px;margin:20px auto 0px;overflow:hidden;}
.box li{width:380px;height:200px;overflow:hidden;margin:10px;float:left;position:relative;cursor:pointer;background:#f6f6f6;}
.top{position:absolute;z-index:1;height:5px;width:0px;top:0px;width:0px;}
.bottom{position:absolute;z-index:1;height:5px;width:0%;bottom:0px;right:0px;}
.left{height:0;position:absolute;left:0px;width:5px;}
.right{height:0;position:absolute;right:0px;width:5px;bottom:0px;}
.box li img{width:370px;height:190px;position:absolute;z-index:1;top:5px;left:5px;}
.box li p{position:absolute;z-index:2;background:rgba(2,179,191,0.5);height:0px;line-height:40px;width:370px;text-align:center;color:#fff;bottom:5px;left:5px;}

附件:下载该文件资源,减少时间成本(增值服务)