jQuery+CSS3提示框按钮过渡效果

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

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

以下是 jQuery+CSS3提示框按钮过渡效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3提示框按钮过渡效果</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.link .button').hover(function(){
		var title=$(this).attr('data-title');
		$('.tip em').text(title);
		var pos=$(this).offset().left;
		var dis=($('.tip').outerWidth()-$(this).outerWidth())/2;
		var l=pos-dis;
		$('.tip').css({'left':l+'px'}).animate({'top':180,'opacity':1},300);
	},function(){
		$('.tip').animate({'top':160,'opacity':0},300);
	})
})
</script>

</head>
<body>

	<div class="box">
		<div class="link mission-link">
			<span class="icon animated"></span>
			<a class="button" data-title="My mission is clear">
			<span class="line line-top"></span>
			<span class="line line-right"></span>
			<span class="line line-bottom"></span>
			<span class="line line-left"></span>
			Mission
			</a>
		</div>
		<div class="link play-link">
			<span class="icon animated"></span>
			<a class="button" data-title="This is my playground">
			<span class="line line-top"></span>
			<span class="line line-right"></span>
			<span class="line line-bottom"></span>
			<span class="line line-left"></span>
			Play
			</a>
		</div>
		<div class="link touch-link">
			<span class="icon animated"></span>
			<a class="button" data-title="This is my playground demos">
			<span class="line line-top"></span>
			<span class="line line-right"></span>
			<span class="line line-bottom"></span>
			<span class="line line-left"></span>
			Touch
			</a>
		</div>
		<p class="tip"><em></em><span></span></p>
	</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#333;}
.box{width:800px;height:280px;margin:50px auto;overflow:hidden;}
.box .link{display:inline-block;width:205px;height:220px;margin:0 20px;position:relative;}
.link .icon{display:block;width:100%;height:180px;-moz-transition:ease-out 0.2s;-o-transition:ease-out 0.2s;-webkit-transition:ease-out 0.2s;transition:ease-out 0.2s;}
.link .icon:hover{transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2);-o-transform:rotate(360deg) scale(1.2);-webkit-transform:rotate(360deg) scale(1.2);}
.mission-link .icon{background:url(../images/mission.png) no-repeat center 0;}
.play-link .icon{background:url(../images/play.png) no-repeat center 0;}
.touch-link .icon{background:url(../images/touch.png) no-repeat center 0;}
.button{display:block;width:180px;height:50px;border:2px solid rgba(255,255,255,0.8);line-height:50px;padding-left:20px;box-sizing:border-box;margin:0 auto;font-weight:bold;font-size:18px;text-decoration:none;text-transform:uppercase;font-family:Arial;color:#2DCB70;background:url(../images/allow.png) no-repeat 130px center;position:relative;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-moz-box-sizing:border-box;-moz-transition:ease 0.4s;-o-transition:ease 0.4s;-webkit-transition:ease 0.4s;transition:ease 0.4s;}
.button:hover{border:2px solid #fff;background-position:140px center;}
.button .line{position:absolute;background:none;-moz-transition:ease 0.4s;-o-transition:ease 0.4s;-webkit-transition:ease 0.4s;transition:ease 0.4s;}
.button:hover .line{background:#fff;}
.button .line-top{width:0px;height:2px;left:-110%;top:-2px;}
.button:hover .line-top{width:100%;left:-2px;}
.button .line-right{width:2px;height:0px;right:-2px;top:-110%;}
.button:hover .line-right{height:100%;top:-2px;}
.button .line-bottom{width:2px;height:0px;left:-2px;bottom:-110%;}
.button:hover .line-bottom{height:100%;bottom:-2px;}
.button .line-left{width:0px;height:2px;right:-110%;bottom:-2px;}
.button:hover .line-left{width:100%;right:-2px;}
.box .tip{position:absolute;padding:0px 14px;height:35px;line-height:35px;background:#2DCB70;color:#fff;top:160px;font-size:16px;font-weight:normal;text-transform:none;margin:0 auto;opacity:0;border-radius:3px}
.tip em{font-style:normal;}
.tip span{position:absolute;width:0;height:0;overflow:hidden;border:7px solid transparent;border-top-color:#2DCB70;left:50%;margin-left:-3px;bottom:-14px;}

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