效果是:图标鼠标以上旋转并缩放,按钮鼠标移上有线条飞入且箭头移动有提示框鼠标移开线条飞出
效果图如下:
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
body{
background-color:steelblue;
}
.box{
width:1000px;
height:280px;
margin:50px auto;
}
.box .link{
width:205px;
height:280px;
margin:0 20px;
float:left;
position:relative;
}
/*transition过渡效果*/
.link .icon{
width:100%;
height:190px;
display:block;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
.link-miss .icon{
background:url("mission.png") no-repeat center center;
}
.link-play .icon{
background:url("play.png") no-repeat center center;
}
.link-touch .icon{
background:url("touch.png") no-repeat center center;
}
/*图标旋转和缩放*/
.link .icon:hover{
-webkit-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
transform: rotate(360deg) scale(1.2);
}
.button{
display:block;
width:156px;
height:50px;
text-decoration:none;
line-height:50px;
color:#2DCB70;
font-family:"微软雅黑";
font-weight:bold;
border:2px solid rgba(255,255,255,0.8);
padding-left:20px;
margin:0 auto;
box-sizing:border-box;
background:url("right.png") no-repeat 90px center;
position:relative;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-o-transition: 0.4s ease;
transition: 0.4s ease;
}
.button:hover{
border:2px solid rgba(255,255,255,1);
background-position:100px center;
}
/*下面是鼠标移上去的线条飞入飞出动画*/
.button .line{
display:block;
position:absolute;
}
.button:hover .line{
background:white;
}
/*高度不变,宽度变,位置变*/
.button .line-top{
height:2px;
width:0px;
left:-110%;
top:-2px;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
.button:hover .line-top{
width:100%;
left:-2px;
}
.button .line-bottom{
width:0;
height:2px;
right:-110%;
bottom:-2px;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
.button:hover .line-bottom{
width:100%;
right:-2px;
}
.button .line-left{
width:2px;
height:0;
bottom:-110%;
left:-2px;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
.button:hover .line-left{
height:100%;
bottom:-2px;
}
.button .line-right{
width:2px;
height:0;
top:-110%;
right:-2px;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
.button:hover .line-right{
height:100%;
top:-2px;
}
/*下面是提示栏的制作*/
.box .tip{
position: absolute;
padding:0 14px;
height:35px;
line-height:35px;
background:#2DCB70;
color:white;
top:160px;
font-size:16px;
font-weight: bold;
text-transform: none;
margin:0 auto;
border-radius:3px;
opacity:0;
}
.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;
}
</style>
</head>
<body>
<!--布局-->
<div class="box">
<div class="link link-miss">
<span class="icon"></span>
<a href="#" class="button" data-title="My mission is clear">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
<div class="link link-play">
<span class="icon"></span>
<a href="#" class="button" data-title="This is my playgroom">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
PLAY
</a>
</div>
<div class="link link-touch">
<span class="icon"></span>
<a href="#" class="button" data-title="Let's do something">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
TOUCH
</a>
</div>
<div class="tip">
<em></em>
<span></span>
</div>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
$(".link .button").hover(function(){
var title=$(this).attr("data-title");//得到提示内容
$(".tip em").text(title);//把提示内容放入em元素中
var pos=$(this).offset().left;
var dis=($(".tip").outerWidth()-$(this).outerWidth())/2;
var f=pos-dis;
$(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);
},function(){
$(".tip").animate({"top":160,"opacity":0},300);
})//动画效果
})
</script>
</body>
</html>