防百度知道中心页面动画效果

20 篇文章 0 订阅
15 篇文章 0 订阅

最近在百度知道中心看到一个动画挺有意思的,就想了一下看怎么实现,百度原效果如下:

这里写图片描述

码云地址:码云上的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;
}

最终效果图:

这里写图片描述

结束语:天气突然变冷了,快到过年了,最近烦心事太多,希望年后会慢慢变好,一直在努力着。。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值