最近在百度知道中心看到一个动画挺有意思的,就想了一下看怎么实现,百度原效果如下:
码云地址:码云上的demo
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<link rel="stylesheet" href="css/baidu.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$(".item").hover(function(){
$(".hv-hide").slideUp('500');
$(".hv-hide").fadeOut('500');
$(".u-icon").fadeTo("slow", 1);
},function(){
$(".bottom p:first").fadeIn('500');
$(".hv-hide").slideDown('500');
$(".u-icon").fadeTo("fast", 0);
});
});
</script>
</head>
<body>
<div class="box" id="box">
<div class="item">
<div class="top">
<div class="hv-hide">
<h2>芝麻团队</h2>
<p>共同进步,共用成长很<br>快乐啊,哈哈哈~!</p>
</div>
<p class="img">
<img src="img/item.jpg">
<span>辅导团数学</span>
</p>
<div class="ot">
<p>团队已经采纳(200,332,333)</p>
<p>
擅长:<span>数学</span><span>英文</span><span>物理</span>
</p>
</div>
</div>
<div class="u-icon">
<img src="img/u.png">
<img src="img/u2.png">
<img src="img/u3.png">
<img src="img/u2.png">
<img src="img/u3.png">
<img src="img/u.png">
</div>
<div class="bottom">
<p>已经有<span>11232</span>个芝麻团</p>
<p>
<a href="#">加入团队</a>
</p>
</div>
</div>
</div>
</body>
</html>
css代码:
* {
margin: 0;
padding: 0;
font-family:"微软雅黑";
}
body{background:#eee;}
#box{width:800px;margin:50px auto;}
#box .item{
position: relative;
width:270px;
height:430px;
color:#fff;
border:1px solid #eee;
background:#fff;
box-shadow: 0 0 5px #ccc;
overflow: hidden;
}
/**动画css部分*/
#box .item:hover .top .img img{
transform:scale(0.9);
transition: all .5s;
}
#box .item:hover .top{
height:240px;
transition: all .5s;
}
/**动画css部分*/
#box .item .top{
position:absolute;
top:0;
z-index: 999;
height:320px;
width:100%;
text-align:center;
background:#F59537;
overflow: hidden;
transition: all .5s;
}
#box .item .top h2{
padding-top:40px;
margin-bottom:15px;
font-weight:normal;
}
#box .item .top .img img{
height:120px;
width:120px;
margin-top:15px;
border:3px solid #fff;
border-radius:60px;
transform:scale(1);
transition: all .5s;
}
#box .item .top .ot{
margin-top:20px;
}
#box .item .top .ot p{
margin:5px 0;
font-size:13px;
}
#box .item .top .ot p span{
margin:0 5px;
text-decoration: underline;
}
#box .item .top .img span{
display:block;
margin-top:10px;
font-size:13px;
}
#box .item .u-icon{
position: relative;
top:30px;
width:180px;
background:#fff;
margin:220px auto 0;
font-size:0;
text-align: center;
opacity: 0;
}
#box .item .u-icon img{
height:40px;
width:40px;
margin:5px ;
border-radius:20px;
border:2px solid #ccc;
}
#box .item .bottom p{
text-align:center;
}
#box .item .bottom p:first-child{
margin-top:10px;
color:#666;
font-size:14px;
}
#box .item .bottom p:first-child span{
color:#ee5e0f;
}
#box .item .bottom p a{
display:block;
width:125px;
height:40px;
margin:10px auto 0;
line-height:40px;
text-align:center;
text-decoration: none;
color:#35b558;
font-size:14px;
border:1px solid #eee;
box-shadow: 0 1px 5px #ccc;
}
#box .item .bottom p a:hover{
border:1px solid #ccc;
}
最终效果图:
结束语:天气突然变冷了,快到过年了,最近烦心事太多,希望年后会慢慢变好,一直在努力着。。。。