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

#麻辣小龙虾#

已于 2023-04-18 10:07:57 修改

阅读量301

点赞数

于 2018-01-06 14:16:04 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/78988501

版权

web前端同时被 3 个专栏收录

99 篇文章 2 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

CSS

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
评论
防百度知道中心页面动画效果

最近在百度知道中心看到一个动画挺有意思的，就想了一下看怎么实现，百度原效果如下：码云地址：码云上的demohtml代码：html lang="en">head> meta charset="UTF-8"> title>baidutitle> link rel="stylesheet" href="css/baidu.css"> script sr
复制链接

扫一扫