jQuery css3边框动画制作鼠标悬停图片边框动画特效



81 321 108



特效描述:边框动画制作 鼠标悬停 图片边框动画,

代码结构

1. 引入JS

<script  type="text/javascript"src="js/jquery.min.js"></script>

2. HTML代码

<div class="box">
	<div class="border_animation">
		<div class="border_top"></div>
		<div class="border_right"></div>
		<div class="border_bottom"></div>
		<div class="border_left"></div>
		<div><a href="#"><img width="220" height="260" alt="" src="images/1.jpg"></a></div>
	</div>
	<div class="border_animation">
		<div class="border_top"></div>
		<div class="border_right"></div>
		<div class="border_bottom"></div>
		<div class="border_left"></div>
		<div><a href="#"><img width="220" height="260" alt="" src="images/2.jpg"></a></div>
	</div>
	<div class="border_animation">
		<div class="border_top"></div>
		<div class="border_right"></div>
		<div class="border_bottom"></div>
		<div class="border_left"></div>
		<div><a href="#"><img width="220" height="260" alt="" src="images/3.jpg"></a></div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$(".border_animation").mouseenter(function(){
		$(this).addClass("hover");
	});
	$(".border_animation").mouseleave(function(){
		$(this).removeClass("hover");
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片滑动 图片滑块

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到