html+css实现百叶效果

浏览数：16 / 时间：2015年06月09日

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	*{margin:0px;padding:0px;}
	#wap{width:1180px;height:360px;
		border:5px solid #ddd;margin:30px auto;
		overflow:hidden;
	}
	#wap ul {width:11090px;height:360px;border:2px solid #FF00CC;}
	#wap ul li{width:196px;height:360px;
		border:1px solid #000 ;list-style:none;
		float:left;
		box-shadow:-4px 0px 30px #000;
		transition:all 1S;
		position:relative;}
	#wap ul li p {width:196px;height:360px;
		background:rgba(0,0,0,0.3);
		line-height:360px;color:#FFF;
		text-align:center;
		font-weight:600;overflow:hidden;
		transition:all 1S;
		position:absolute;
		}
	#wap ul li p.top{top:0px;left:0px;}
	#wap ul li p.bottom{bottom:0px;left:0px;}
	#wap ul:hover li{width:40px;}
	#wap ul:hover li p {width:40px;}
	#wap ul li:hover{width:980px;}
	#wap ul li:hover p {width:980px;}
	#wap ul:hover li p{width:40px;
		line-height:30px;
		letter-spacing:10px;
		text-align:"center";margin:auto;
		transition:all 1S;}
	#wap ul li:hover p{width:100%;height:40px;line-height:40px;letter-spacing:20px;}
  </style>
 </HEAD>

 <BODY>
  <div id ="wap">
	<ul>
		<li><img src="img/1.jpg"/>
			<p class="top">付出不亚于任何人的努力</p>
			<p class="bottom">付出不亚于任何人的努力</p>
		</li>
		<li><img src="img/2.jpg"/>
			<p class="top">谦虚戒骄</p>
			<p class="bottom">谦虚戒骄</p></li>
		<li><img src="img/3.jpg"/>
			<p class="top">天天反省</p>
			<p class="bottom">天天反省</p></li>
		<li><img src="img/4.jpg"/>
			<p class="top">活着要感谢</p>
			<p class="bottom">活着要感谢</p></li>
		<li><img src="img/5.jpg"/>
			<p class="top">借事炼心</p>
			<p class="bottom">借事炼心</p></li>
		<li><img src="img/6.jpg"/>
			<p class="top">心态乐观</p>
			<p class="bottom">心态乐观</p></li>
	<ul>
  </div>
 </BODY>
</HTML>
</strong>